Estoy aprendiendo a hacer un menú desplegable de un tutorial.
Hay algunas partes que no se..
{options.map((option) => ( <div onClick={(e) => { setSelected(option); }} > el tutorial usó inicialmente onClick={(e) => {setSelected(e.target.textContent);}} ¿por qué tiene que cambiar e.target.textContent a la option ?
¿Cómo sabe el programa qué elemento se selecciona exactamente por option sin usar 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>