I'm learning how to do dropdown menu from a tutorial.
There are some parts that I don't know..
{options.map((option) => (
<div
onClick={(e) => {
setSelected(option);
}}
>
the tutorial initially
used onClick={(e) => {setSelected(e.target.textContent);}}
why have to change e.target.textContent into option?
how do program know which item is selected exactly by option without using e.target.textContent?
function App() {
const [selected, setSelected] = React.useState("Choose One");
return (
<div>
{/* custom dropdown menu */}
<Dropdown selected={selected} setSelected={setSelected} />
{selected}
</div>
);
}
function Dropdown({ selected, setSelected }) {
const [isActive, setIsActive] = React.useState(false);
const options = ["React", "Vue", "Angular"];
return (
<div onClick={(e) => setIsActive(!isActive)}>
{isActive && (
<div>
{options.map((option) => (
<div
onClick={(e) => {
setSelected(option);
}}
></div>
))}
</div>
)}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>