Tengo una matriz que estoy pasando a un componente secundario, donde quiero que todos los elementos de la matriz se representen en una lista. No es complicado, lo he hecho un montón de veces, excepto que esta vez no puedo hacer que se formatee como quiero.
En mi padre, estoy filtrando a través de una matriz de objetos en mi estado y devolviendo el objeto que quiero:
state = { activeTab: 0, tabs: [ { id: 0, icon: <AiFillShopping />, label: 'Groceries', content: ['grocery list', 'test'] }, { id: 1, icon: <FaSchool />, label: 'School', content: ['school list', 'test'] } ], value: '', } let filteredContent = this.state.tabs.filter((tab, index) => { if(index === this.state.activeTab) { return tab; } }) console.log(filteredContent) // logs {id: 0, label: "Groceries", content: Array(2)}Luego estoy pasando filteredContent a mi hijo, y luego en mi hijo estoy mapeando a través del accesorio para obtener el contenido y enumerar los elementos como una lista:
<ul> {this.props.content.map(content=> <li>{content.content}</li>)} </ul>Pero aparece como un elemento de la lista, con todos los elementos en una línea como esta: "prueba de lista de comestibles"
Estoy seguro de que acabo de hacer algo estúpido, pero lo he estado mirando durante mucho tiempo, en este punto me vendría bien otro par de ojos.
Dado que content.content es una matriz de contenido renderizable, es decir, cadenas, React lo concatena para usted y lo renderiza.
Primero querrá aplanar las matrices de content anidado y luego asignarlas a JSX.
<ul> {content .flatMap((content) => content.content) .map((content) => ( <li key={content}>{content}</li> ))} </ul> function App() { const content = [ { id: 0, // icon: <AiFillShopping />, label: "Groceries", content: ["grocery list", "test"] }, { id: 1, // icon: <FaSchool />, label: "School", content: ["school list", "test"] } ]; return ( <div className="App"> <ul> {content .flatMap((content) => content.content) .map((content) => ( <li key={content}>{content}</li> ))} </ul> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <App />, rootElement ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />Si solo desea una lista de contenido separada por comas, se unen a la matriz de contenido.
<ul> {content.map((content) => ( <li key={content}>{content.content.join(", ")}</li> ))} </ul> La devolución de llamada de Array.prototype.filter devuelve un booleano, no el elemento que desea en la matriz de resultados. Su código de filtro solo funciona por "accidente", ya que devolver una tab está forzado a un valor verdadero, y cuando el índice no coincide, implícitamente está devolviendo indefinido, que es un valor falso. Solo debe devolver el resultado de la condición.
const filteredContent = this.state.tabs.filter( (tab, index) => index === this.state.activeTab ); Dado que está filtrando la matriz de pestañas y ( presumiblemente ) representándolas, es posible que no desee utilizar el índice de la matriz, ya que no está intrínsecamente relacionado con ninguna pestaña. Usar tab.id y almacenar una identificación de pestaña activa sería una mejor opción, ya que la id no está relacionada con ninguna posición relativa en la matriz, siempre será la misma por objeto de pestaña.