I am in the process of creating a component that will display different components depending on which button the user selects.
Here are the available “pages”:
`
const navigation = [
{ name: "EOQ", return: "<EOQgraph />" },
{ name: "ROP", href: "<ROPgraph />" },
{ name: "Table", href: "<Table />" },
{ name: "ROC+SS", href: "<ROCSSgraph />" },
{ name: "Table+SS", href: "<TableSS />" },
]
`
The function and UseState that should receive the key (not all components are implemented yet) are as follows:
`
const [toggle, setToggle] = useState('')
const wantedGraph = (value) => {
switch (value){
case "EOQ":
return setToggle(<EOQgraph />);
case "ROP":
return setToggle(<ROPgraph />);
`
And the return statement uses a .map to render all the buttons: `
return(
<div>
{navigation.map((item) => (
<button type="submit"
className={'btn btn-outline-dark btn-md'}
key={item.name}
onClick={() => setToggle(wantedGraph(item.name))}
>
{item.name}
</button>
))}
<div>
{ toggle }
</div>
</div>
)
`
Currently, nothing is displaying within the component.
The page functions correctly and the buttons are present. UseState is functioning properly; however, when a button is clicked, the component does not render.
I would like to mention that I am also utilizing Graph.js with each component located on a separate page and imported accordingly.