EN
React - conditional rendering
0
points
In this article, we would like to show you conditional rendering in React.
Below example presents how to render a shopping list if there are any items to buy, otherwise render a header with information.
Practical example:
// ONLINE-RUNNER:browser;
// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
const ShoppingListItem = (props) => {
return (
<p>{props.id} {props.name}</p>
);
}
const App = () => {
const [list, setList] = React.useState([{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }]);
const itemCounter = list.length;
return (
<div>
{itemCounter === 0
? <h1>no items to buy</h1>
: list.map(item =>
<ShoppingListItem
key={item.id}
id={item.id}
name={item.name}
/>
)
}
</div>
);
}
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);