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



Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post