📚 Cheatsheet

Une collection organisée de snippets de code pour accélérer votre développement. Parcourez, recherchez et copiez en un clic.

Snippets 5

Retour
L'attribut 'key' dans les listes
Facile 
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);
Rendu conditionnel avec l'opérateur &&
Facile 
<div>{unreadMessages.length > 0 && <h2>Vous avez {unreadMessages.length} messages non lus.</h2>}</div>
Rendu conditionnel avec un opérateur ternaire
Facile 
<div>{isLoggedIn ? <LogoutButton /> : <LoginButton />}</div>
Rendu d'une liste (map)
Facile 
const numbers = [1, 2, 3];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);
Rendu de rien (null)
Intermédiaire 
function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return <div className="warning">Avertissement !</div>;
}