Tengo problemas para renderizar elementos dinámicamente en mi proyecto React.
Este es mi archivo de datos xxx.js
export const valuesText = [ { "GB": { 0: "Responsibility", 1: "Hospitality", 2: "Attention to detail", 3: "Adaptability", 4: "Efficiency", 5: "Passion for Quality" }, "PT": { 0: "Responsabilidade", 1: "Hospitalidade", 2: "Detalhe e pormenor", 3: "Adaptabilidade", 4: "Eficiência", 5: "Paixão pela Qualidade" } } ]Este es mi componente y la lógica para representar los 5 temas según el idioma seleccionado por el usuario (GB o PT)
Lógica para renderizar elementos basados en datos
const textSectionValues = valuesText.map((data) => { const values = data[props.language] Object.values(values).map((item, index) => { return <div className="hero_section_values_container"> <h3>{item[index]}</h3> </div> } )})Componente adaptado para que la cantidad de información no sea demasiado ruidosa para ustedes.
const AboutUs = (props) => { return( <section className="about_us_section"> {textSectionValues} </section> ) }A través de las herramientas para desarrolladores de Chrome, puedo ver que la matriz creada a partir de Object.values se itera y tiene los valores correctos. Desafortunadamente, no he logrado renderizar el contenido al DOM.
¿Qué estoy haciendo mal?
¡Gracias!
primero, su primer bucle no devuelve nada. segundo, necesita item de impresión, porque es el texto real.
const textSectionValues = valuesText.map((data) => { const values = data[props.language]; return Object.values(values).map((item) => { return ( <div key={item} className="hero_section_values_container"> <h3>{item}</h3> </div> ); }); });ejemplo de trabajo: https://codesandbox.io/s/nameless-currying-n0es7
¿Estás seguro de tu estructura de datos? Su matriz contiene solo un objeto que contiene los datos, por lo que el primer mapa es redundante. Mira esto
const valuesText = { GB: { 0: "Responsibility", 1: "Hospitality", 2: "Attention to detail", 3: "Adaptability", 4: "Efficiency", 5: "Passion for Quality" }, PT: { 0: "Responsabilidade", 1: "Hospitalidade", 2: "Detalhe e pormenor", 3: "Adaptabilidade", 4: "Eficiência", 5: "Paixão pela Qualidade" } }; export default function App(props) { return ( <div className="App"> {Object.values(valuesText[props.language]).map((value, index) => ( <h1 key={index}>{value}</h1> ))} </div> ); }