const [showNotes, setShowNotes] = useState(false); const generateNotes = () => { setShowNotes(true); <TextField id="notesField" label="Add your note here" variant="outlined"/> }; <div style = {{ display: 'flex', width: '300px', justifyContent: 'space-between' }}> <Button id="note" onClick={generateNotes} variant="contained" component="label" style = {{ backgroundColor: '#3f78b5', flex: '50px', width: '122px', height: '38px', borderRadius: '8px', left: '388px', position: 'absolute' }}> Add Note </Button> </div>Creé una variable useState y la inicialicé en falso. Luego, creé una función que lo establecería en verdadero y crearía el campo de texto. Luego, cuando se hace clic en el botón, debería mostrar el campo de texto, pero eso no sucede. Me doy cuenta de que no configuré la variable showNotes en ninguna parte, pero no estoy seguro de qué configurar para eso.
puede hacer esto al tener una matriz a la que el botón agrega texto, y reaccionar creará un componente TextField para cada elemento, por ejemplo:
const [notes, setNotes] = useState([]); const generateNotes = () => { notes.push('some label'); setNotes([ ...notes ]); }; return ( <div> <Button id="note" onClick={generateNotes}></Button> { notes.map((item, index)=>{ return <TextField key={index} label={item)/> } } </div> )No puede representar TextField dentro de una devolución de llamada, debe ser de la devolución de su componente. Puede crear un contador para incrementar la cantidad de campos de entrada y representar solo si el recuento es mayor que cero.
const [inputFieldCount, setInputFieldCount] = useState(0); const generateNotes = () => { setInputFieldCount((count) => count + 1); }; return ( <div style={{ display: "flex", width: "300px", justifyContent: "space-between" }} > <Button onClick={generateNotes}>Add Note</Button> {inputFieldCount > 0 && Array.from({ length: inputFieldCount }, (_, index) => ( <TextField key={index} id="notesField" label="Add your note here" variant="outlined" /> ))} </div> );El segundo argumento de Array.from es una función de mapa para iterar sobre el recuento de matrices.