Hago un bucle en un objeto y me gustaría mostrar un resultado basado en las entradas de Object.
Sin embargo, el bucle se detiene en el primer retorno.
¿Cómo puedo obtener y mostrar en una sola vez lo que me devuelven los componentes? ¿En una variable tal vez? Gracias
export const ResultItem: React.FC<Props> = (props:Props) => { const search = props const provideItem = () => { for (const [key, value] of Object.entries(search.result)) { switch(key) { case "companies": return <SearchCompany result={search.result[key]}/> case "medias": return <SearchMedias result={search.result[key]}/> case "contracts": return <SearchContracts result={search.result[key]}/> case "contacts": return <SearchContacts result={search.result[key]}/> } } } return (<div>{provideItem()}</div>) }Dado que está devolviendo un componente, la ejecución del bucle for finaliza en la primera iteración. Una solución fácil sería crear una matriz de elementos e insertar componentes en él, luego renderizarlos a la vez.
export const ResultItem: React.FC<Props> = (props:Props) => { const search = props const provideItem = () => { const items = [] for (const [key, value] of Object.entries(search.result)) { switch(key) { case "companies": items.push(<SearchCompany result={search.result[key]}/>) case "medias": items.push(<SearchMedias result={search.result[key]}/>) case "contracts": items.push(<SearchContracts result={search.result[key]}/>) case "contacts": items.push(<SearchContacts result={search.result[key]}/>) } } return items } return (<div>{provideItem()}</div>) }