Question

0

158

Views

.map() is not mapping (generating <div> with .map())

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`

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-09T04:42:12.013Z

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>)}
         )}

0

158