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.

CodePudding user response：

The problem is: You are getting an object inside your function parameters and you are comparing that object with Table 2 and Table 1.

So just change your function to this:

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

Advice:

1. Use === instead of == (Unrelated to answer)
2. No need to use toString as your all DropDown values have string values

CodePudding user response：

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;