Dynamically rendering list of jobs in React

user_19433814 0
Viewed 36

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?

reactjs javascript
2 Answers

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>
      );
user_169358910

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>
Admin1
Related