Scribd
Upload
2 views3 pages

Lists

The document explains how to create and manage lists in React, similar to JavaScript lists, using the map() function for rendering. It provides examples of simple and complex lists, including a component that allows users to add items to a list. The examples demonstrate the use of state and event handling in functional components.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views3 pages

Lists

The document explains how to create and manage lists in React, similar to JavaScript lists, using the map() function for rendering. It provides examples of simple and complex lists, including a component that allows users to add items to a list. The examples demonstrate the use of state and event handling in functional components.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

React Lists

Lists are used to display data in an ordered format and mainly used to display menus on
websites. In React, Lists can be created in a similar way as we create lists in JavaScript.
Let us see how we transform Lists in regular JavaScript.

The map() function is used for traversing the lists. In the below example, the map()
function takes an array of numbers and multiply their values with 5. We assign the new
array returned by map() to the variable multiplyNums and log it.

import React, {Component} from 'react'


const numbers = [1, 2, 3, 4, 5];
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
class App extends Component{
render(){
return(
<div>
<NumberList numbers={numbers} />
</div>
);
}
}
export default App;

Ex2:

const list = [
{
id: 'a',
firstname: 'Robin',
lastname: 'Wieruch',
year: 1988,
},
{
id: 'b',
firstname: 'Dave',
lastname: 'Davidds',
year: 1990,
},
];

const ComplexList = () => (


<ul>
{list.map(item => (
<li key={item.id}>
<div>{item.id}</div>
<div>{item.firstname}</div>
<div>{item.lastname}</div>
<div>{item.year}</div>
</li>
))}
</ul>
);

Ex3:

const initialList = [
'Learn React',
'Learn Firebase',
'Learn GraphQL',
];

const ListWithAddItem = () => {


const [value, setValue] = React.useState('');
const [list, setList] = React.useState(initialList);

const handleChange = event => {


setValue(event.target.value);
};
const handleSubmit = event => {
if (value) {
setList(list.concat(value));
}

setValue('');

event.preventDefault();
};

return (
<div>
<ul>
{list.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input type="text" value={value} onChange={handleChange} />
<button type="submit">Add Item</button>
</form>
</div>
);
};
export default ListWithAddItem;

You might also like