react-list-rendering.jsx

// static list ==========================================================
class MyList extends React.Component{
    render(){
        return(
            <>
                <ul>
                    <li>list item 1</li>
                    <li>list item 2</li>
                    <li>list item 3</li>
                </ul>
            </>
        )
    }
}

// rendarling a list dynamically  ==========================================================
(each child in a list should have a unique "key")
class MyList extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            listitems : ['list item 1', 'list item 2', 'list item 3', 'list item 4']
        }
    }

    render(){
        return(
            <>
                <ul>
                    {this.state.listitems.map( (list) => (
                        <li key={list}>{list}</li>
                    ))}
                    
                </ul>
            </>
        )
    }
}

// rendering and array of objects as a list ==========================================================

class MyList extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            productLists : [
                {
                    id : 1,
                    productname : 'Apple iPhone XR',
                    productprice : 'Rs. 42,000'
                },
                {
                    id : 2,
                    productname : 'Apple iPhone 11',
                    productprice : 'Rs. 54,000'
                },
                {
                    id : 3,
                    productname : 'Apple iPhone 12',
                    productprice : 'Rs. 94,000'
                }
            ]
        }
    }

    render(){
        return(
            <>
                <ul>
                    {this.state.productLists.map( (list) => (
                        <li key={list.id}>{list.id} --- {list.productname}, {list.productprice} </li>
                    ))}
                </ul>
            </>
        )
    }
}

// map() function take an array of number and double their values, assigned to a new array =====================================================
class MyList extends React.Component{
    render(){
        let singleList = [1, 2, 3, 4, 5]
        let doubleList = singleList.map( (i) => i * 2 )
        return(
            <>
                <h1>Single List : {singleList}</h1>
                <h1>Double List : {doubleList}</h1>
            </>
        )
    }
}