\n {/* btn container */}\n {/* here we have a div */}\n {/* we want to iterate over our jobs array and for each and every item, we want to display a button */}\n
\n {/* using a map function with the parameters of job and the index of it */}\n {/* and then we want it to return the button with the job title */}\n {/* key={job.strapiId} helps react identify which items have changed, are\n added, or are removed. */}\n {/* {job.company} is the item that will have the company field which each value/button */}\n {/* the className is dynamic. we set up template strings with the className of job-btn but if the index will match the index/value of the current state (jobs[value]) then it will set this up as an active button using the className */}\n {jobs.map((job, index) => {\n return (\n // ternary: if index is equal to whatever the value is then add also an 'active-btn' class\n setValue(index)}\n className={`job-btn ${index === value && \"active-btn\"}`}\n >\n {job.company}\n \n )\n })}\n
\n {/* job info */}\n
\n {position}
\n {company}
\n {date}
\n {/* description is an array so we need to do more than just normal tags and passing in of the object */}\n {/* since description is an array, we want to map over it and take each item within the current iteration and return it as a div container */}\n {/* this div container will have a key since react needs help with the identification of the id and a class */}\n {/* within the div there is an imported icon from react-icons and a tag containing the description which in this case is name */}\n {description.map(item => {\n return (\n
\n )\n })}\n \n