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 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;

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();

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.