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.
تعليقات
إرسال تعليق
POST Answer of Questions and ASK to Doubt