如何使用 reactjs 和 css 创建垂直制表符

Question

Am trying to bulid vertical tab that will function exactly like in the demo link below sample links from w3schools

here is the screenshot of what am trying to achieve as per the demo sample above

To this effect tried solution found here at but it does not give me what I want as per demo sample above Stackoverflow link

Now I have decided to go my own way in trying it out.

I have succeeded in displaying the content from an array via reactjs. when user click on each country, the content of that country gets displayed.

My Problem:

My issue is that I cannot get it to display the content in a vertical tab div as can be seen in the screenshot

Here is the coding so far

import React, { Component, Fragment } from "react";
import { render } from "react-dom";

class Country extends React.Component {
  state = { open: false };
  toggleOpen = id => {
    alert(id);

    this.setState(prevState => ({
      open: !prevState.open
    }));
  };

  render() {
    return (
      <React.Fragment>
        <div key={this.props.data.id}>
          <button onClick={() => this.toggleOpen(this.props.data.id)}>
            {this.props.data.name}
          </button>
        </div>

        <div>
          {this.state.open && (
            <div>
              <div>
                <b>id: </b>
                {this.props.data.id}
              </div>
              <div>
                <b>Info: </b>
                {this.props.data.info}
              </div>
              <div>
                <b>Country name:</b> {this.props.data.name}
              </div>
              content for <b> {this.props.data.name}</b> will appear here..
            </div>
          )}
        </div>
      </React.Fragment>
    );
  }
}

class VerticalTab extends React.Component {
  constructor() {
    super();

    this.state = {
      data: [
        { id: "1", name: "London", info: "London is the capital city of England." },
        { id: "2", name: "Paris", info: "Paris is the capital of France." },
        { id: "3", name: "Tokyo", info: "Tokyo is the capital of Japan." }
      ]
    };
  }

  render() {
    return (
      <div>
        <div>
          {this.state.data.map(country => (
            <Country key={country.id} data={country} />
          ))}
        </div>
      </div>
    );
  }
}

Answer 1

Is this what you are looking for?

 class App extends React.Component { constructor(props) { super(props); this.state = { currentTab: -1, data: [ { id: "1", name: "London" ,info: "London is the capital city of England."}, { id: "2", name: "Paris" ,info: "Paris is the capital of France." }, { id: "3", name: "Tokyo" ,info: "Tokyo is the capital of Japan."} ] }; this.handleClick = this.handleClick.bind(this); } handleClick(currentTab) { this.setState({ currentTab }); } render() { return ( <div> <h2>Vertical Tabs</h2> <p>Click on the buttons inside the tabbed menu:</p> <div className="tab"> {this.state.data.map((button, i) => ( <button key={button.name} className="tablinks" onClick={() => this.handleClick(i)}>{button.name}</button> ) ) } </div> <div className="tabcontent"> {this.state.currentTab !== -1 && <React.Fragment> <h3>{this.state.data[this.state.currentTab].name}</h3> <p>{this.state.data[this.state.currentTab].info}</p> </React.Fragment> } </div> </div> ) } } ReactDOM.render( < App / > , document.getElementById('root') ); 

 * {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px; } 

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <div id="root" /> 

Answer 2

React Tabs with Hooks

Here is a link to react tabs. Maybe this will help you.

enter code here