React change content based on item selected in Dropdown

January 21, 2022

I have three different JSXs in the Component folder and each of them represents a different table.
The function names inside these JSXs are:

Table1
Table2
Table3

The goal for this website is to switch to different table functions(<Table1 />,<Table2 />, <Table3 />) according to the selection in the dropdown.

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Table1 from './component/table.jsx';
import Table2 from './component/table2.jsx';
import Table3 from './component/table3.jsx';
import Dropdown from 'react-bootstrap/Dropdown';

function App() {
  
  const [value,setValue]=useState('');
  const handleSelect=(e)=>{
    console.log(e);
    setValue(e)
  }
  function Tab(value) {
  
    if (value.toString() == 'Table2') {
      return <Table2 />;
    }else if (value.toString()=='Table1') {
      return <Table1 />;
    }else {
      return <Table3 />;
    }
  }

  return (
    <div className="app-container">
      <Dropdown  onSelect={handleSelect}>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item eventKey="Table1">1</Dropdown.Item>
          <Dropdown.Item eventKey="Table2">2</Dropdown.Item>
          <Dropdown.Item eventKey="Table3">3</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      <h4>You selected {value}</h4>
      <Tab value={value} />
    </div>
  );
}


export default App;

Please check animation

As you can see, currently the dropdown does go to the correct string, but unfortunately, in function Tab(value), this always returns no matter what I chose.

Please kindly advise what I should modify in function Tab(value) to make it work.

>Solution :

Just move Tab outside of your App component and in props you must use {} to destrure the props to get value:

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Table1 from './component/table.jsx';
import Table2 from './component/table2.jsx';
import Table3 from './component/table3.jsx';
import Dropdown from 'react-bootstrap/Dropdown';

function App() {
  
  const [value,setValue]=useState('');
  const handleSelect=(e)=>{
    console.log(e);
    setValue(e)
  }
  

  return (
    <div className="app-container">
      <Dropdown  onSelect={handleSelect}>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item eventKey="Table1">1</Dropdown.Item>
          <Dropdown.Item eventKey="Table2">2</Dropdown.Item>
          <Dropdown.Item eventKey="Table3">3</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      <h4>You selected {value}</h4>
      <Tab value={value} />
    </div>
  );
}

function Tab({value}) {
  
    if (value.toString() == 'Table2') {
      return <Table2 />;
    }else if (value.toString()=='Table1') {
      return <Table1 />;
    }else {
      return <Table3 />;
    }
  }

export default App;