So when i choose the first option, 5 buttons should appear below dropdown, second option should have 9 buttons (it's different for every option), should i create json for buttons? i'm lost on how to do it, please help me out
CodePudding user response:
You want to store the state of the selected item in the select
element.
Then using this value you want to "conditionally render" different buttons.
Check out this codesandbox.
import { useState } from "react";
export default function App() {
const [selected, setSelected] = useState("op1");
const selectionChanged = (e) => setSelected(e.target.value);
return (
<div className="App">
{/* SELECT COMPONENT */}
<select value={selected} onChange={selectionChanged}>
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
</select>
{/* IF OPTION 1 IS SELECTED */}
{selected === "op1" && (
<>
<button>Button 1</button>
<button>Button 2</button>
</>
)}
{/* IF OPTION 2 IS SELECTED */}
{selected === "op2" && (
<>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</>
)}
</div>
);
}