Estoy aprendiendo React y he decidido crear un CV dinámico. Actualmente tengo la etiqueta "en" y "pl" para elegir el idioma. Tengo un objeto que contiene todos mis trabajos en dos idiomas (más a continuación). Mi objetivo principal es mantener los trabajos como objetos js para poder filtrar los resultados y actualizar la lista dinámicamente.
const languageOption = { en: [{ name: "Company X", position: "Programmer", date: "Aug 2022 - Present", skills: ["eating", "sleeping", "programming"] }, { name: "Company Y", position: "IT Manager", date: "Jan 2022 - Jul 2022", skills: [ "playing games", 'saying "Have you tried turning it off and on again?"' ] }, { name: "Company Z", position: "Marketing Manager", date: "Jan 2021 - Dec 2021", skills: [ "leading a team", "creating content", "eating free samples", "having fun" ] } ], pl: [{ name: "Firma X", position: "Programista", date: "Sie 2022 - Obecna", skills: ["jedzenie", "spanie", "programowanie"] }, { name: "Firma Y", position: "Kierownik IT", date: "Sty 2022 - Lip 2022", skills: [ "granie w gry", 'mówienie "Czy spróbowałeś wyłączyć i włączyć ponownie?"' ] }, { name: "Firma Z", position: "Manager Marketingu", date: "Sty 2021 - Gru 2021", skills: [ "prowadzenie zespołu", "tworzenie treści", "jedzenie darmowych sampli", "bawienie się dobrze" ] } ] };Me gustaría llenar el contenedor div a continuación con los datos del trabajo y crear un nuevo contenedor para cada trabajo. (El código a continuación es de antes de que tuviera varios trabajos. Estaba tratando de hacer que la traducción funcionara primero antes de agregar varios trabajos.
export function JobCardEN({ data }) { const skillsListen = data.en.skills.map((skill) => <li>{skill}</li>); return ( <div className="job-card"> <div className="job-card-title"> <h1>{data.en.name}</h1> <p>{data.en.date}</p> </div> <div className="job-card-content"> <ul>{skillsListen}</ul> </div> </div> ); }¿Cómo represento todos los trabajos como contenedores individuales que se pueden filtrar y cambiar?
¿Has intentado usar.map() para renderizar jsx?
export function JobCardEN({ data }) { return ( <div className="job-card"> {languageOption.en.map((item, i) => <div key={i} className="job-card-title"> <h1>{item.name}</h1> <p>{item.date}</p> {item.skills.map((item, i) => // something like this } </div> )} </div> );Primero toma un estado como este
const [lang, setLang] = useState('en')Estoy hablando del valor predeterminado como en .
Ahora mapee a través de los datos
languageOption[lang].map((data)=>{ return ( <div className="job-card"> <div className="job-card-title"> <h1>{data.name}</h1> <p>{data.date}</p> </div> </div> })Ahora imagina que quieres mostrar todos los trabajos en lenguaje pl. Ahora solo crea un botón y cambia el estado a pl .
<button onClick={()=>setLang('pl')}> Change language </button>