About
This page is about Loop in React and Jsx.
Example
Basic Javascript vs React Loop
Example with Pure Javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
where:
- map is the Array Map function with an Arrow function as argument
Example in React
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
<div id="root"></div>
Advanced React with Key
By adding a key to the element, React can do a quicker reconciliation between two renderings to render only what have changed.
- NumberList is a component that accepts an array of numbers and outputs an unordered list of elements with a unique local key attribute
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
- Rendering
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
<div id="root"></div>
Advanced with Loop in Jsx
Because JSX allows embedding any expressions in curly braces, we could inline the map() result of the previous example.
- NumberList with the loop inside Jsx.
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map( (number) => (
<li key={number.toString()}>{number}</li>
))}
</ul>
);
}
- The Javascript Rendering
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
- The root element where to render
<div id="root"></div>
Why a key
A key is a special string attribute you need to include when creating lists of elements (component,…) to allow a quick reconciliation (diff) between different renderings. They help React identify which items have been changed, added, or removed.
A key value is a string that uniquely identifies a list item among its siblings.
- the natural IDs from your object
- or the index array as a last resort - Using indexes for keys is not a good idea if the items can be reordered as it would be slow.
Rules:
- Keys Must Only Be Unique Among Siblings
- Keys used within arrays should be unique among their siblings. However, they don't need to be globally unique.
If you need the same value in your component, pass it explicitly as a prop with a different name.
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
You may read an in-depth explanation about why keys are necessary here.