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



Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post