मेरे पास तीन सरणियाँ हैं 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