यह सामान्य हैं React में कभी कभी List rendering की जरूरत पड़ती है। react में list बनने के लिए जावास्क्रिप्ट की map function का उपयोग के करना होता।
Simple List Rendered Example
function List(){ var words = [ "React", "is", "Front-End" , "UI Library"] var itemList = words.map((e)=>{ return <li> {e} </li>; }); return(<ol> {itemList} </ol>); } ReactDOM.render( <List /> , root);
Key
Key मदद करता है जानने में कि List में कौन सा item Add, Remove और Change हो रहा है।
key attribute की property value हमेशा unequie रखें।
function List(){ var words = [ "React", "is", "Front-End" , "UI Library"] var itemList = words.map((e,index)=>{ return <li key={index.toString()}> {e} </li>; }); return(<ol> {itemList} </ol>); }
Array of Object
यह उदाहरण हैं जो Array, जावास्क्रिप्ट Objects को
रखता है।
var posts = []; posts.push({ name : "React", about : "I am React.", syntax : "Javascript + JSX" }); posts.push({ name : "Vue", about : "I am Vue.", syntax : "Javascript + HTML" }); function List(){ var itemList = posts.map((e,index)=>{ return <li key={index.toString()}> <h5>{e.name} - <small className="badge bg-primary">{e.syntax}</small> </h5> <p> {e.about} </p> </li>; }); return(<ul className="list-group"> {itemList} </ul>); } ReactDOM.render( <List /> , root)
No comments:
Post a Comment