How to write tabs in React?

7

75db772019-07-10 10:01:06

React

75db77, 2019-07-10 10:01:06

How to write such tabs (tabs) on React?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
   
<style>
body {font-family: Arial;}


.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


.tab button:hover {
  background-color: #ddd;
}


.tab button.active {
  background-color: #ccc;
}


.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-07-10
@75db77

We put the data of the tabs in an array:

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.' },
];

We make a component that displays a tab. There is nothing complicated here - the transmitted data is simply displayed:

const TabContent = ({ title, content }) => (
  <div className="tabcontent">
    <h3>{title}</h3>
    <p>{content}</p> 
  </div>
);

We make a component that will display the roots of the tabs and the active tab. The data of the active tab is determined through the index of the corresponding element in the array, which is stored in the component and is set when the spine is clicked:

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/