Как написать вкладки(tabs) на React?

а как бы выглядел ваш предложенный код но без хуков и с классовыми компонентами а не функциональными? Я просто изучал по урокам на ютуб React, и там все уроки были построены на классах и обычных this.setState без хуков, и сейчас путаюсь, потому-что думаю так как учили а тут уже что-то новое и каша какая-то получается у меня.

Как переделать в React код переключение класса как в примере?

а как сделать точно так как моем примере:
1)при нажатии на кнопку, клас как бы добавляется

2)когда снова нажимаю, удаляется:

я просто новичок, пока даже это для меня трудно понять, хоть это наверное самый простой компонент...

Почему в React такая схема?

Просто как-то запутано получается. Ведь допустим комьютер знает что я передал функции welcome имя sara, cahal, и Edite, потому что я прописал {props.name}. Другими словами я говорю компютеру: Возврати мне заголовок Hello и значение свойства name.
Но как компьютер знает что я хочу взять Hello из функции Welcome и положить в функцию App? Ведь в функции App я этого не написал.

Как написать вкладки Accordion на React?

0xD34F, я просто хочу на своем сайте сделать два вида вкладок, хотел по вашому примеру из предыдущей моей темы сделать по аналогии, но то что получилось стыдно показать даже...не работет, хотя вроде задача очень похожая... только не судите строго, я только начал изучать React...
Вот код:

const TabContent = ({ content }) => (
  <div className="accordion">
    <p>{content}</p> 
  </div>
);

function Tabs({ items }) {
  const [ active, setActive ] = React.useState(null);

  const openTab = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button
            className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
          >{n.title}</button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}

const items = [
  { content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
  { content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
  {content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
];

ReactDOM.render(<Tabs items={items} />, document.getElementById('app'));

<div id="app"></div>

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

Правильно ли я понимаю функцию(предназначение) слова this в даном примере?

Привет.Спасибо
А для чего нужны эти два this? обращение к новосозданным объектам или другая какая-то функция у них?
this.add = function(item, id)
и еще онда функция:
this.reduceByOne = function(id)