Languages
[Edit]
EN

React - conditional rendering

0 points
Created by:
Frida-Timms
247

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);

References

ReactJS

React - conditional rendering
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join