React में List Rendering कैसे करते है?

मेरा नाम आशुतोष कुमार हैं और आज के इस पोस्ट में हम जानेंगे कि React में List Rendering कैसे की जाती है।

यह सामान्य हैं 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)