Dunissimo

Данные вкладок кладём в массив:

const items = [
  { title: 'London', content: 'London is the capital city of England.' },
  { title: 'Paris', content: 'Paris is the capital of France.' },
  { title: 'Tokyo', content: 'Tokyo is the capital of Japan.' },
];

Делаем компонент, отображающий вкладку. Тут ничего сложного - просто выводятся переданные данные:

const TabContent = ({ title, content }) => (
  <div className="tabcontent">
    <h3>{title}</h3>
    <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>
  );
}

https://jsfiddle.net/0dhaojze/