Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 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 =>{   

    return data;   



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 =>{   
    return <li>{myList}</li>;   
function App() {
  return (

export default  App;

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


Create Component to render props type list object

import React from 'react';   
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems =>  
  return (  
        <h2>Rendering Lists inside component</h2>  

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']; 
      <NameList myLists={myLists} />

  // 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:


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.

Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post