Estoy tratando de pasar valores uno por uno a un componente funcional desde la función array.map. Lamentablemente, el componente no muestra el valor.

Esto es lo que estoy recibiendo. Hay nombres de habitaciones almacenados en la base de datos que deben imprimirse aquí.

Pantalla de inicio.js

 import React, { useState, useEffect } from "react"; import axios from "axios"; import Room from "../components/Room"; export default function Homescreen() { const [rooms, setRooms] = useState([]); const [loading, setLoading] = useState(); const [error, setError] = useState(); useEffect(async () => { try { setLoading(true); const data = (await axios.get("/api/rooms/getallrooms")).data; setRooms(data); setLoading(false); setError(false); } catch (error) { setLoading(false); setError(true); console.log(error); } }, []); return ( <div> {loading ? ( <h1>Loading...</h1> ) : error ? ( <h1>Error fetching details from API</h1> ) : ( rooms.map((room) => { return (<div> <Room key={room._id} room={room}></Room> </div> ) }) )} </div> ); }

Room.js (Componente funcional que debe imprimir los nombres de las habitaciones):

 import React from "react"; function Room(room){ console.log(room.name) return( <div> <h1>Room name: {room.name}.</h1> </div> ) } export default Room;

Los datos se obtienen correctamente de db porque si, en lugar de pasar el valor al componente, imprimo directamente en mi pantalla principal, los valores se imprimen.

En otras palabras, en Homescreen.js, hacer <p>{room.name}</p> en lugar de <Room key={room._id} room={room}></Room> imprime los nombres de las habitaciones correctamente.

Entonces, creo que el problema surge cuando paso los valores como accesorios.

Cualquier ayuda es muy apreciada. Gracias.