Tengo un problema extraño con el siguiente código.

Después de mapear las notas, {notes.map(note => { ...}); console.log({notes}) devuelve una matriz de cuatro elementos. Hay cuatro elementos en la matriz. De manera similar, console.log({note.title}) registra el título de cada elemento como lo haría un método de mapa. Cuando llamamos a {note.title} en la línea anterior a console.log({note.title}) , ¡no aparece nada en la página! Un ejemplo del código se muestra a continuación en forma resumida. El código con el problema se envió a GitHub. Puede verlo en la confirmación "MyNotes.js no muestra los datos en pantalla mientras los registra perfectamente en la consola".

La consola de herramientas de desarrollo registra este error

Advertencia: React.jsx: el tipo no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.

Verifique su código en MyNotes.js:31.

https://github.com/bdarab/notezipper-mern

 { notes.map((note) => { <Card style={{ margin: 10 }}> <Card.Header style={{ display: 'flex' }}> <span style={{ alignSelf: 'center', color: 'black', cursor: 'pointer', flex: 1, fontSize: 18, textDecoration: 'none', }} > {note.title} // Doesn't work console.log(note); // Works perfectly </span> <div> <Button>Edit</Button> <Button className='mx-2' variant='danger'> {' '} Delete{' '} </Button> </div> </Card.Header> </Card>; }); }

Lo extraño es que todo funciona cuando los consuelo. log(), pero no aparece en la página. Seguí codificando a ciegas. Ahora, tengo métodos para mostrar {note._id}, {note.category} y {note.content} que funcionan perfectamente cuando los registro en la consola. Sin embargo, en código real, no obtengo resultados. ¿Por qué? https://github.com/bdarab/notezipper-mern