.map() is not mapping (generating with .map())

Question

What I was trying to make...

Code...

const programmingSkillsDetails = [
  { skill: "JavaScript", ratingPercentage: 85 },
  { skill: "React JS", ratingPercentage: 85 },
  { skill: "React Native", ratingPercentage: 85 },
  ...
];


...



<div
  className="resume-screen-container programming-skills-container"
  key="programming-skills"
>
    {programmingSkillsDetails.map((skill, index) => {
        <div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>;
    })}
</div>

Output...

Renders the parent "screen-container" <div> ... but doesn't map children <div>'s

Recognizes the skill.skill and skill.ratingPercentage

Answer 1

This is because your map function returns nothing.

Map function takes a callback function as a parameter, and this callback have to return something if you want to display something in the DOM. Here is some more informations: https://linguinecode.com/post/how-to-use-map-react

Do this instead:

{programmingSkillsDetails.map((skill, index) => 
        <div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>
    )}

Or you could also write it like this:

{programmingSkillsDetails.map((skill, index) => {
   return <div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>}
         )}

Or like this:

{programmingSkillsDetails.map((skill, index) => {
   return (<div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>)}
         )}