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;
Multidimensional List:-
Using this we can contain multiple records based on rows and columns means we can create List and define internal elements as an Object.
var varname = [{key:value, key:value}]
Example of a Multidimensional List to show elements in Table Format
var student = [
{rno:1001,name:"manish kumar",branch:"CS"},
{rno:1002,name:"ravi kumar",branch:"IT"},
{rno:1003,name:"kapil kumar",branch:"EC"}
]
function ListExample2()
{
var courseitems = student.map((data)=>{
return <tr><td>{data.rno}</td><td>{data.name}</td><td>{data.branch}</td></tr>
})
return(<div>
<table width="400">
<tr><th>RNO</th><th>Name</th><th>Branch</th></tr>
{courseitems}
</table>
</div>)
}
export default ListExample2;
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.
Comments
Post a Comment
POST Answer of Questions and ASK to Doubt