मेरे पास तीन सरणियाँ हैं persons, skills और personSkills। अब मैं इस तरह से एक अनियंत्रित लंबवत सूची में प्रत्येक व्यक्ति के लिए सभी कौशल दिखाना चाहता हूं

  • व्यक्ति1
    - स्किल1
    - कौशल २
  • व्यक्ति2
    - स्किल3
    - स्किल4

यहाँ मेरा कोड है-

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

लेकिन यह सिर्फ दिखाता है

  • व्यक्ति1

  • व्यक्ति २

मेरे सैंडबॉक्स का लिंक यह है - सैंडबॉक्स

कृपया मदद करे।

2
sandy 28 जिंदा 2021, 20:23

2 जवाब

सबसे बढ़िया उत्तर

आप कौशल को स्टोर करने के तरीके को इस प्रकार सरल बना सकते हैं:

this.state = {
      personSkills: {
        Person1: ["Skill1", "Skill2"],
        Person2: ["Skill3", "Skill4"]
      }
};

अब प्रतिपादन करते समय:

render() {
    return (
      <div className="App">
        {persons.map((eachP) => (
          <ul>
            {eachP}
            {this.state.personSkills[eachP] && this.state.personSkills[eachP].map((skill) => {
              return <li>{skill}</li>;
            })}
          </ul>
        ))}
      </div>
    );
  }
2
sandy 29 जिंदा 2021, 10:55

map फ़ंक्शन रिटर्न स्टेटमेंट की अपेक्षा करता है। तो आपको अपने कोड को कुछ इस तरह संशोधित करने की आवश्यकता है

{this.state.personSkills.map((eachPS) => {
  return eachPS[eachP] && eachPS[eachP].map((eachS) => <li>{eachS}</li>);
})}
2
Black Wind 28 जिंदा 2021, 20:34