Im learning React and I've decided to create a dynamic CV. I currently have the label "en" and "pl" to choose the language. I have an object containing all of my jobs in two languages (more to follow). My main aim is to keep the jobs as js objects so I can filter results and update the list dynamically.
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"
]
}
]
};I would like to populate the below div container with the job data and create a new container for each job. (the code below is from before I had multiple jobs. I was trying to get the translation working first before I added multiple jobs.
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>
);
}How do I render all of the jobs as individual containers that can be filtered and changed?
Have you tried using.map() to render 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>
);
First take a state like this
const [lang, setLang] = useState('en')
I'm talking the default value as en.
Now map through the data
languageOption[lang].map((data)=>{
return (
<div className="job-card">
<div className="job-card-title">
<h1>{data.name}</h1>
<p>{data.date}</p>
</div>
</div>
})
Now imagine you want to show all jobs in pl language. Now just create a button and change the state to pl.
<button onClick={()=>setLang('pl')}>
Change language </button>