tengo un objeto:
{ cities: { MCR: "Manchester", LDN: "London", NYC: "New York" } }y quiero iterar sobre estos y mostrarlos en un formato de tabla que mostrará el código de la ciudad y el nombre largo al lado. Algo como:
<tbody> <tr> <th>City Code</th> <th>City Name</th> </tr> <tr> {Object.entries(cities).map(([key, value]) => { <> <td>{key}</td> <td>{value}</td> </> } )} </tr> </tbody>Sin embargo, esto no muestra nada y también muestra un error al pasar el mouse sobre el valor:
Type 'unknown' is not assignable to type 'ReactNode'.ts(2322)Soy bastante nuevo en React y me pregunto cuál es la mejor manera de mostrar esta información.
Gracias
Digamos que tienes un objeto como:
const obj = { cities: { MCR: "Manchester", LDN: "London", NYC: "New York" } };Sería mejor recorrer las
citiesy crear un nuevotrpara que parezca una tabla
Si desea map las cities , debe return del mapa como:
<tbody> <tr> <th>City Code</th> <th>City Name</th> </tr> { Object.entries( obj.cities ).map( ( [key, value] ) => { return ( // PROBLEM SHOULD RETURN <tr> <td>{ key }</td> <td>{ value }</td> </tr> ); } ) } </tbody>Debe devolver el resultado en cada iteración. Además, cada iteración devolvería un tr con un accesorio key :
{ Object.entries(obj.cities).map(([key, value]) => ( <tr key={key}> <td>{key}</td> <td>{value}</td> </tr> )) }Nota: dado que la ciudad es una clave en un objeto, deberá acceder a ella como se indicó anteriormente
Solo te falta el return en la función de devolución de llamada de tu mapa. Recuerde siempre incluir un return en sus funciones de flecha cuando lo use así: () => {} . Es fácil pasarlo por alto porque ()=>() devolvería lo que escriba en el segundo () pero en el ejemplo anterior esto no es cierto.