Add the Skills Component

We’ll list the skills that an individual possesses in the Skills component.

Add the skills

We define a skillsArr variable that contains an array of skills. Following that, we define a skills variable that returns the list of skills after mapping over the skillsArr. Here’s how we’ll do it.

const skillsArr = ['JavaScript', 'HTML', 'CSS', 'Reactjs', 'Git']

const skills = skillsArr.map((skill, index) => {
  return <li className='skill' key={index}>{skill}</li>
})

Return the skills

We’ll now return the skills in a div with className=skills to display them on the screen. The following snippet explains this process:

return (
  <div className='skills'>
    <h2 className='title'>Skills</h2>
    <div className='skill-holder'> 
    {skills}</div>
  </div>
)