Tengo un componente Cars que tendrá múltiples componentes Car dentro. Tengo algunas comprobaciones para asegurarme de que Car[] no sea indefinido o nulo. Pero Car no se renderiza.

el registro de consola de carobj es: Object { id: 5, year: 2009, make: "honda", model: "civic", price: 18000, person_id: 1, created_at: "2022-03-12T05:56:18.526Z", updated_at: "2022-03-12T05:56:18.526Z" }

justo antes de pasar los datos al componente del car

coches.tsx:

 import {car, Car} from './car'; interface cars { cars?: car[]; } function Cars (props: cars) { return ( <div className="carcontainer"> <h2>cars container</h2> {props.cars && props.cars?.length > 0 && props.cars!!.map((carobj: car, idx) => { console.log(carobj); let {year, make, model, price, person_id } = carobj; <Car year={year} make={make} model={model} price={price} person_id={person_id} key={idx} /> // <Car {...carobj} key={idx}/> })} </div> ) } export default Cars;

y mi componente car.tsx:

 export interface car { year: number, make:string, model: string, price: number, person_id: number, } export function Car (props: car) { console.log(props.year); return ( <div className="car"> <h3> car:{props.year} {props.make} {props.model} {props.price} </h3> </div> ) }

el registro de consola de props.year dentro del Car no aparece en la consola.

Intenté distribuir los accesorios y también pasarlos explícitamente.

No aparecen errores en reactapp o en la consola. ¿Qué estoy haciendo mal? Gracias