List in React JS, What is List in React-Js, What is Map() in React-JS

 List in React JS:-

The list is the collection of elements of similar and dissimilar type values, it is similar to a javascript array.

We should always display list elements using a map().

Syntax of List:-

var = [item1,item2,item3,item4,...]

Syntax to display List elements:-

const name = var.map((data)=>{   

    return data;   

});   

console.log(name); 

Now I am explaining a Live example of List in React-JS:-

Write the complete code on app.js file

import './App.css';

const myList = ['C', 'CPP', 'JAVA', '.NET', 'PHP'];   

   const listItems = myList.map((myList)=>{   

    return <li>{myList}</li>;   

    }); 

    

function App() {

  

  return (

  

      <div>

      <ul>{listItems}</ul>    

     

       

      </div>

   

  );

}

export default  App;

Same Example using class Component:-

import React from 'react'

export class ListExample extends React.Component

{

     render(){

         var x = ['C','CPP','DS','JAVA','PHP']

         const item= x.map((x)=>{

             return <li>{x}</li>

         });

         return(

           <div>

               <ul>{item}</ul>

           </div>

         );

     }

}

index.js

import {ListExample} from './ListExample'

//const x = 11

//var result = <p>{ x%2==0?"even":"odd"}</p>

ReactDOM.render(

  <React.StrictMode>

    <ListExample />

  </React.StrictMode>,

  document.getElementById('xyz')

);

Now I am discussing another example to pass List elements as a prop.

Step1st:-

Create Component to render props type list object

import React from 'react';   

 

function NameList(props) {  

  const myLists = props.myLists;  

  const listItems = myLists.map((myList) =>  

    <li>{myList}</li>  

  );  

  return (  

    <div>  

        <h2>Rendering Lists inside component</h2>  

              <ul>{listItems}</ul>  

    </div>  

  );  

}  

export default  NameList;

Call this components under index.js file

  import React from 'react';

  import ReactDOM from 'react-dom';

  import './index.css';

  

  import reportWebVitals from './reportWebVitals';

  import NameList from './NameList'

  const myLists = ['JAVA', 'PHP', 'iOS', 'Android', 'Windows PHone']; 

  ReactDOM.render(

    <React.StrictMode>

      <NameList myLists={myLists} />

    </React.StrictMode>,

    document.getElementById('root')

  );

  // If you want to start measuring performance in your app, pass a function

  // to log results (for example: reportWebVitals(console.log))

  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

  reportWebVitals();

Same Example using Class Component:-

import React from 'react'

export class ListExample extends React.Component

{

    constructor(props)

    {

        super(props)

    }

     render(){

         const x = this.props.myprop;

         const item= x.map((x)=>{

             return <li>{x}</li>

         });

         return(

           <div>

               <ul>{item}</ul>

           </div>

         );

     }

}

import {ListExample} from './ListExample'

//const x = 11

//var result = <p>{ x%2==0?"even":"odd"}</p>

const x = ['C','CPP','DS','JAVA','PHP']

ReactDOM.render(

  <React.StrictMode>

    <ListExample myprop={x} />

  </React.StrictMode>,

  document.getElementById('xyz')

);

Display List under Table Form:-

function ListExampleNew()

{

    var cname = ["C","C++","DS","JAVA"];

    var cfees = [2500,5000,1200,3500];

    var fee = 0;

    for(var i=0;i<cfees.length;i++)

    {

        fee = fee + cfees[i];

    }

    var d = cname.map((data) => {

        return <tr><td>{data}</td></tr>;

    });

    var e = cfees.map((data) => {

        return <tr><td>{data}</td></tr>;

    });

    return(

        <div>

            <table border='1'>

                <tr><th>CourseName</th> <th>Course Fees</th></tr>

                <tr><td><table>{d}</table></td><td><table>{e}</table></td></tr>

            </table>

            <p>Total Fees is :- {fee}</p>

        </div>

    );

}

export default ListExampleNew;

Assignment:-

Create a Marksheet program using two different List, the first list will declare marks, and the second list contains the value of elements, Pass lists elements as props objects.