reaccionar novato aquí una vez más. Estoy tratando de actualizar la página con una nota al presionar el botón 'enviar'. Honestamente, lo intenté durante tanto tiempo que creo que mi código es un desastre.

Función principal:

 function MainLogged() { const [sendingScreen, setSendingScreen] = useState(true); let notes = []; const [note, setNote] = useState('') function onNoteChange(event){ const {value} = event.target; setNote(value); } function afterButtonClick(event) { notes.push(note); setSendingScreen((prev) => !prev) } return ( <div id='main'> {sendingScreen ? <MainBody noteCallback={onNoteChange} callback={afterButtonClick}/> : <ResetScreen callback={afterButtonClick}/> } {console.log(notes)} { notes.map((singleNote) => { return (<p id='single-note' className='note'>{singleNote}</p>) }) } </div> ) }

luego va al componente:

 function MainBody(props) { const {noteCallback, callback} = props; return ( <div> <p id='main-body'>{lorem}</p> <div className='card text-center' style={{width: '18rem', alignSelf: 'center'}}> <Input onChange={noteCallback} type='text' placeholder='My note is...' className='card-body information' /> </div> <SendCardButton callback = {callback}/> </div> ) }

y finalmente (si es necesario):

 function SendCardButton(props){ const {callback} = props; return ( <button type="button" className="btn btn-success toBeCentered" onClick={callback}>Send</button> ) }

El uso de este código deja la matriz de notas siempre vacía.

Por favor, si puede explicarme para que pueda aprender y mejorar, REALMENTE lo necesito ahora mismo. ¡Muchas gracias!