I have three different JSXs in the Component folder and each of them represents a different table.
The function names inside these JSXs are:
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;
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.
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:
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;