How to show a nested list in React.js?

I have three arrays persons, skills and personSkills. Now I want to show all skills for each person in a unordered vertical list, like this

  • Person1
    – Skill1
    – Skill2
  • Person2
    – Skill3
    – Skill4

Here’s my code-

let persons = ["Person1", "Person2"];
let skills = ["Skill1", "Skill2", "Skill3", "Skill4"];

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      personSkills: [
        { Person1: ["Skill1", "Skill2"] },
        { Person2: ["Skill3", "Skill4"] }
      ]
    };
  }

  render() {
    return (
      <div className="App">
        {persons.map((eachP) => (
          <ul>
            {eachP}

            {this.state.personSkills.map((eachPS) => {
              eachPS[eachP] && eachPS[eachP].map((eachS) => <li>{eachS}</li>);
            })}
          </ul>
        ))}
      </div>
    );
  }
}

But it just shows

  • Person1
  • Person2

Here’s a link to my sandbox – sandbox

Please help.

43 thoughts on “How to show a nested list in React.js?”

  1. 316616 569304Currently actually do not stop eating because there is yet the decision that you will transform into. Work from your home us rrs often a fad for that who wants to earn money yet still enough time requires most substantial occasions making use of children and kids goes for as the modern habit. attract abundance 385734

    Reply

Leave a Comment