Afficher et masquer des éléments avec React Native

React propose plusieurs façons de manipuler la visibilité des éléments sur une page. Une approche courante consiste à utiliser un style en ligne pour définir la propriété d'affichage. Cependant, cette méthode nécessite un style en ligne, ce qui peut être peu pratique et rendre le code moins lisible.

Une solution plus élégante consiste à utiliser l'API React State. L'API State vous permet de définir et de gérer des données au sein d'un composant React. En modifiant l'état d'un composant, vous pouvez déclencher un nouveau rendu, qui mettra à jour l'interface utilisateur en fonction du nouvel état.

Voici comment afficher ou masquer un élément sur une page via un événement de clic en utilisant l'API React State :

1. Créez un nouveau composant React, tel que MyComponent.
2. Dans la méthode de rendu de votre composant, affichez l'élément que vous souhaitez afficher ou masquer, et utilisez le rendu conditionnel pour déterminer si l'élément doit être visible ou non.
3. Dans la méthode constructeur de votre composant, créez une nouvelle variable d'état, telle que showElement, et définissez-la sur false.
4. Ajoutez un gestionnaire d'événements onClick à l'élément qui déclenche le changement de visibilité. Dans le gestionnaire d'événements, activez la variable d'état showElement.
5. Utilisez la variable d'état showElement dans la méthode de rendu pour restituer l'élément de manière conditionnelle. Si showElement est vrai, l'élément sera visible. Si showElement est faux, l'élément sera masqué.

Voici un exemple de la façon dont vous pourriez implémenter ceci :

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }

  toggleShowElement = () => {
    this.setState((prevState) => ({ showElement: !prevState.showElement }));
  };

  render() {
    return (
      

        {this.state.showElement && 
Hello World!
}
        Toggle
      
    );
  }
}

Cet extrait de code crée un nouveau composant React appelé MyComponent qui affiche un div avec le texte « Hello World ! » lorsque la variable d'état showElement est vraie. Il comprend également un bouton qui bascule la visibilité du message « Hello World ! » élément.