¿Cómo es correcto filtrar datos de un objeto y luego renderizarlos? Encontré una solución de trabajo adecuada, pero el problema es que tengo que devolver un nodo vacío; de lo contrario, aparecerá un error: ``` Array.prototype.map() espera que se devuelva un valor al final de la función de flecha:
const movieRows = Object.entries(movieObject).map(([key, value], id) => { if ( key === "Actors" || key === "Director" || key === "Country" || key === "Runtime" ) { return ( <tr key={id}> <td className="title">{`${key}:`}</td> <td className="value">{`${value}`}</td> </tr> ); } else { // this return <></>; } });Incluso eso no es del todo bueno, porque recibo un mensaje en la consola de que es necesario agregar una clave.
Así que estoy devolviendo un nodo innecesariamente vacío, solo para satisfacer a React.
else { return <tr key={id}></tr>; }¿Hay alguna forma de escribir esto sin un nodo innecesario?
Gracias
Gracias a Nick, la solución es:
const movieRows = Object.entries(movieObject) .filter( ([key]) => key === "Actors" || key === "Director" || key === "Country" || key === "Runtime" ) .map(([key, value], id) => { return ( <tr key={id}> <td className="movie-subtitle">{`${key}:`}</td> <td>{`${value}`}</td> </tr> ); });