How do I change state from a map loop? - reactjs

Question

I created a "skillProg" state using useState and want to change it using the "setSkillProg" inside a map loop. But I get a unexpected token error. Here is the code:
const Skills = () => {
const skills = [
{ bgcolor: "#0bd30e", completed: 100, name: "HTML" },
{ bgcolor: "#0bd30e", completed: 100, name: "CSS" },
{ bgcolor: "#0bd30e", completed: 90, name: "JavaScript" },
{ bgcolor: "#0bd30e", completed: 90, name: "React" },
{ bgcolor: "#0bd30e", completed: 90, name: "Express" },
{ bgcolor: "#0bd30e", completed: 90, name: "MongoDB" },
{ bgcolor: "#0bd30e", completed: 90, name: "Firebase" },
{ bgcolor: "#0bd30e", completed: 90, name: "PostGreSQL" },
{ bgcolor: "#0bd30e", completed: 90, name: "Git" },
{ bgcolor: "#0bd30e", completed: 90, name: "JavaScript" },
];
const [skillProg, setSkillProg] = useState(0);
return (
<div className="skills">
{skills.map((skill, idx) => (
{setSkillProg({skill.completed})}
<ProgressBar
key={idx}
bgcolor={skill.bgcolor}
completed={skillProg}
name={skill.name}
className="progress_bar"
/>
))}
</div>
);
};
export default Skills;

Answer 1

When working with JSX elements in ReactJS, you typically return these values when working in map() (as well as when working within render()). Try this...
return(
<ProgressBar
key={idx}
bgcolor={skill.bgcolor}
completed={skillProg}
name={skill.name}
className="progress_bar"
/>
);
Take a look at the default syntax from MDN Web Docs, you'll see the return() there, too...
let newArray = arr.map(callback(currentValue[, index[, array]]) {
// return element for newArray, after executing something
}[, thisArg]);
Even though it's not JSX or ReactJS, it's still returning something.
P.S. I have asked for further debugging details, I will update my answer as needed when I get these.