Afficher ou masquer l'élément dans React

Je joue avec React.js pour la première fois et je ne trouve pas de moyen d'afficher ou de masquer quelque chose sur une page via un événement de clic. Je ne charge aucune autre bibliothèque sur la page, je cherche donc une manière native d'utiliser la bibliothèque React. C'est ce que j'ai jusqu'à présent. Je voudrais afficher les résultats div lorsque l'événement click se déclenche.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

Réagissez vers 2020

Dans le onClickrappel, appelez la fonction setter du hook d'état pour mettre à jour l'état et restituer:

const Search = () => {
  const [showResults, setShowResults] = React.useState(false)
  const onClick = () => setShowResults(true)
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  )
}

const Results = () => (
  <div id="results" className="search-results">
    Some Results
  </div>
)

ReactDOM.render(<Search />, document.querySelector("#container"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

React vers 2014

La clé consiste à mettre à jour l'état du composant dans le gestionnaire de clics à l'aide de setState. Lorsque les changements d'état sont appliqués, la renderméthode est appelée à nouveau avec le nouvel état:

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

ReactDOM.render( <Search /> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

<style type="text/css">
    .hidden { display:none; }
</style>

render: function() {
    return (
      <div className={this.props.shouldHide ? 'hidden' : ''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div>
    );
}

// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

Voici une syntaxe alternative pour l'opérateur ternaire:

{ this.state.showMyComponent ? <MyComponent /> : null }

est équivalent à:

{ this.state.showMyComponent && <MyComponent /> }

Lean pourquoi

Également une syntaxe alternative avec display: 'none';

<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />

Cependant, si vous en abusez display: 'none', cela conduit à une pollution DOM et ralentit finalement votre application.

Voici mon approche.

import React, { useState } from 'react';

function ToggleBox({ title, children }) {
  const [isOpened, setIsOpened] = useState(false);

  function toggle() {
    setIsOpened(wasOpened => !wasOpened);
  }

  return (
    <div className="box">
      <div className="boxTitle" onClick={toggle}>
        {title}
      </div>
      {isOpened && (
        <div className="boxContent">
          {children}
        </div>
      )}
    </div>
  );
}

Dans le code ci-dessus, pour y parvenir, j'utilise du code comme:

{opened && <SomeElement />}

Cela ne sera rendu SomeElementque si openedc'est vrai. Cela fonctionne en raison de la façon dont JavaScript résout les conditions logiques:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise (and false will be ignored by react during rendering)
// be careful with 'falsy' values eg
const someValue = 0;
someValue && <SomeElement /> // will output 0, which will be rednered by react
// it'll be better to:
!!someValue && <SomeElement /> // will render nothing as we cast the value to boolean

Raisons d'utiliser cette approche au lieu de CSS 'display: none';

• Bien qu'il puisse être «moins cher» de masquer un élément avec CSS - dans ce cas, l'élément «caché» est toujours «vivant» dans le monde réactif (ce qui pourrait le rendre plus cher)
  • cela signifie que si les accessoires de l'élément parent (par exemple. <TabView> ) changeront - même si vous ne voyez qu'un seul onglet, les 5 onglets seront tous rendus
  • l'élément caché peut encore avoir certaines méthodes de cycle de vie en cours d'exécution - par exemple. il peut récupérer certaines données du serveur après chaque mise à jour même si elles ne sont pas visibles
  • l'élément caché peut planter l'application si elle reçoit des données incorrectes. Cela peut arriver car vous pouvez «oublier» les nœuds invisibles lors de la mise à jour de l'état
  • vous pouvez par erreur définir un mauvais style d'affichage lorsque vous rendez l'élément visible - par exemple. certains div est 'display: flex' par défaut, mais vous définirez 'display: block' par erreur avecdisplay: invisible ? 'block' : 'none' ce qui pourrait casser la mise en page
  • l'utilisation someBoolean && <SomeNode />est très simple à comprendre et à raisonner, surtout si votre logique liée à l'affichage de quelque chose ou non devient complexe
  • dans de nombreux cas, vous souhaitez «réinitialiser» l'état de l'élément lorsqu'il réapparaît. par exemple. vous pouvez avoir un curseur que vous souhaitez mettre en position initiale chaque fois qu'il est affiché. (si c'est le comportement souhaité pour conserver l'état de l'élément précédent, même s'il est caché, ce qui est rare, j'imaginerais utiliser CSS si se souvenir de cet état d'une manière différente serait compliqué)

avec la dernière version react 0.11, vous pouvez également simplement retourner null pour ne pas avoir de contenu rendu.

Rendu à null

J'ai créé un petit composant qui gère cela pour vous: react-toggle-display

Il définit l'attribut style sur la display: none !importantbase du hideou des showaccessoires.

Exemple d'utilisation:

var ToggleDisplay = require('react-toggle-display');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search />, document.body);

Il y a déjà plusieurs bonnes réponses, mais je ne pense pas qu'elles aient été très bien expliquées et plusieurs des méthodes données contiennent des pièges qui pourraient trébucher. Je vais donc passer en revue les trois principales méthodes (plus une option hors sujet) pour le faire et expliquer les avantages et les inconvénients. J'écris principalement cela parce que l'option 1 a été beaucoup recommandée et qu'il y a beaucoup de problèmes potentiels avec cette option si elle n'est pas utilisée correctement.

Option 1: rendu conditionnel dans le parent.

Je n'aime pas cette méthode, sauf si vous n'allez rendre le composant qu'une seule fois et le laisser là. Le problème est qu'il provoquera la réaction de créer le composant à partir de zéro à chaque fois que vous basculez la visibilité. Voici l'exemple. LogoutButton ou LoginButton sont rendus conditionnellement dans le LoginControl parent. Si vous exécutez cela, vous remarquerez que le constructeur est appelé à chaque clic sur le bouton. https://codepen.io/Kelnor/pen/LzPdpN?editors=1111

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Maintenant, React est assez rapide pour créer des composants à partir de zéro. Cependant, il doit toujours appeler votre code lors de sa création. Donc, si votre code constructeur, componentDidMount, rendu, etc. est cher, cela ralentira considérablement l'affichage du composant. Cela signifie également que vous ne pouvez pas l'utiliser avec des composants avec état où vous souhaitez que l'état soit préservé lorsqu'il est masqué (et restauré lorsqu'il est affiché.) Le seul avantage est que le composant caché n'est pas créé du tout tant qu'il n'est pas sélectionné. Les composants cachés ne retarderont donc pas le chargement initial de votre page. Il peut également y avoir des cas où vous VOULEZ réinitialiser un composant avec état lorsqu'il est basculé. Dans ce cas, c'est votre meilleure option.

Option 2: Rendu conditionnel chez l'enfant

Cela crée les deux composants une fois. Puis court-circuite le reste du code de rendu si le composant est masqué. Vous pouvez également court-circuiter d'autres logiques dans d'autres méthodes à l'aide de l'hélice visible. Remarquez le fichier console.log dans la page codepen. https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        <LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
        <LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    if(!this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    if(this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Maintenant, si la logique d'initialisation est rapide et que les enfants sont sans état, vous ne verrez aucune différence de performances ou de fonctionnalités. Cependant, pourquoi faire en sorte que React crée un tout nouveau composant chaque bascule de toute façon? Cependant, si l'initialisation est coûteuse, l'option 1 l'exécutera à chaque fois que vous basculerez sur un composant, ce qui ralentira la page lors du basculement. L'option 2 exécutera tous les inits du composant lors du chargement de la première page. Ralentir cette première charge. Faut noter à nouveau. Si vous ne montrez le composant qu'une seule fois en fonction d'une condition et ne le changez pas, ou si vous souhaitez qu'il se réinitialise lors du basculement, l'option 1 est correcte et probablement la meilleure option.

Si le chargement lent des pages pose problème, cela signifie que vous avez du code coûteux dans une méthode de cycle de vie et ce n'est généralement pas une bonne idée. Vous pouvez, et devriez probablement, résoudre le lent chargement des pages en retirant le code coûteux des méthodes de cycle de vie. Déplacez-le vers une fonction asynchrone lancée par ComponentDidMount et demandez au rappel de le placer dans une variable d'état avec setState (). Si la variable d'état est nulle et que le composant est visible, la fonction de rendu renvoie un espace réservé. Sinon, restituez les données. De cette façon, la page se chargera rapidement et remplira les onglets lors de leur chargement. Vous pouvez également déplacer la logique dans le parent et envoyer les résultats aux enfants comme accessoires. De cette façon, vous pouvez prioriser les onglets qui seront chargés en premier. Ou mettez en cache les résultats et exécutez la logique uniquement la première fois qu'un composant est affiché.

Option 3: masquage de classe

Le masquage de classe est probablement le plus facile à implémenter. Comme mentionné, vous venez de créer une classe CSS avec display: none et attribuez la classe en fonction de prop. L'inconvénient est que le code entier de chaque composant caché est appelé et que tous les composants cachés sont attachés au DOM. (L'option 1 ne crée pas du tout les composants cachés. Et l'option 2 court-circuite le code inutile lorsque le composant est masqué et supprime complètement le composant du DOM.) Il semble que cela soit plus rapide pour basculer la visibilité selon certains tests effectués par des commentateurs sur d'autres réponses mais je ne peux pas en parler.

Option 4: un composant mais changez les accessoires. Ou peut-être aucun composant du tout et cache HTML.

Celui-ci ne fonctionnera pas pour toutes les applications et il est hors sujet car il ne s'agit pas de masquer des composants, mais il pourrait être une meilleure solution pour certains cas d'utilisation que de masquer. Disons que vous avez des onglets. Il pourrait être possible d'écrire un composant React et d'utiliser simplement les accessoires pour changer ce qui est affiché dans l'onglet. Vous pouvez également enregistrer le JSX dans des variables d'état et utiliser un accessoire pour décider quel JSX retourner dans la fonction de rendu. Si le JSX doit être généré, faites-le et mettez-le en cache dans le parent et envoyez le bon comme accessoire. Ou générer dans l'enfant et le mettre en cache dans l'état de l'enfant et utiliser des accessoires pour sélectionner celui qui est actif.

C'est une belle façon d'utiliser le DOM virtuel :

class Toggle extends React.Component {
  state = {
    show: true,
  }

  toggle = () => this.setState((currentState) => ({show: !currentState.show}));

  render() {
    return (
      <div>
        <button onClick={this.toggle}>
          toggle: {this.state.show ? 'show' : 'hide'}
        </button>    
        {this.state.show && <div>Hi there</div>}
      </div>
     );
  }
}

Exemple ici

Utilisation des crochets React:

const Toggle = () => {
  const [show, toggleShow] = React.useState(true);

  return (
    <div>
      <button
        onClick={() => toggleShow(!show)}
      >
        toggle: {show ? 'show' : 'hide'}
      </button>    
      {show && <div>Hi there</div>}
    </div>
  )
}

Exemple ici

Vous définissez une valeur booléenne dans l'état (par exemple, «show»), puis effectuez:

var style = {};
if (!this.state.show) {
  style.display = 'none'
}

return <div style={style}>...</div>

La meilleure pratique est ci-dessous selon la documentation:

{this.state.showFooter && <Footer />}

Rendre l'élément uniquement lorsque l'état est valide.

class Toggle extends React.Component {
  state = {
    show: true,
  }

  render() {
    const {show} = this.state;
    return (
      <div>
        <button onClick={()=> this.setState({show: !show })}>
          toggle: {show ? 'show' : 'hide'}
        </button>    
        {show && <div>Hi there</div>}
      </div>
     );
  }
}

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

     handleClick = (){
       this.setState({
          hidediv: true
        });
      }

      render(){
        return(
        <div>
          <div className="date-range" hidden = {this.state.hidediv}>
               <input type="submit" value="Search" onClick={this.handleClick} />
          </div>
          <div id="results" className="search-results" hidden = {!this.state.hidediv}>
                        Some Results
           </div>
        </div>
        );
      }
  }

Je commence par cette déclaration de l'équipe React:

Dans React, vous pouvez créer des composants distincts qui encapsulent le comportement dont vous avez besoin. Ensuite, vous ne pouvez rendre que certains d'entre eux, selon l'état de votre application.

Le rendu conditionnel dans React fonctionne de la même manière que les conditions fonctionnent en JavaScript. Utilisez des opérateurs JavaScript comme if ou l'opérateur conditionnel pour créer des éléments représentant l'état actuel, et laissez React mettre à jour l'interface utilisateur pour les faire correspondre.

Vous devez essentiellement montrer le composant lorsque le bouton est cliqué, vous pouvez le faire de deux manières, en utilisant Pure React ou en utilisant CSS, en utilisant Pure React, vous pouvez faire quelque chose comme le code ci-dessous dans votre cas, donc lors de la première exécution, les résultats ne sont pas affichés comme hideResultsest true, mais en cliquant sur le bouton, le changement va de l' Etat et hideResultsest falseet le get composant rendu à nouveau avec les nouvelles conditions de valeur, ceci est une utilisation très courante de changer vue des composants dans React ...

var Search = React.createClass({
  getInitialState: function() {
    return { hideResults: true };
  },

  handleClick: function() {
    this.setState({ hideResults: false });
  },

  render: function() {
    return (
      <div>
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.state.hideResults && <Results /> }
      </div> );
  }

});

var Results = React.createClass({
  render: function() {
    return (
    <div id="results" className="search-results">
      Some Results
    </div>);
   }
});

ReactDOM.render(<Search />, document.body);

Si vous souhaitez approfondir le rendu conditionnel dans React, jetez un œil ici .

Exemple de masquage / affichage simple avec React Hooks: (essayez de ne pas jouer de violon)

const Example = () => {

  const [show, setShow] = useState(false);

  return (
    <div>
      <p>Show state: {show}</p>
      {show ? (
        <p>You can see me!</p>
      ) : null}
      <button onClick={() => setShow(!show)}>
    </div>
  );

};

export default Example;

Si vous souhaitez voir comment faire basculer l'affichage d'un composant à la caisse de ce violon.

http://jsfiddle.net/mnoster/kb3gN/16387/

var Search = React.createClass({
    getInitialState: function() {
        return { 
            shouldHide:false
        };
    },
    onClick: function() {
        console.log("onclick");
        if(!this.state.shouldHide){
            this.setState({
                shouldHide: true 
            })
        }else{
                    this.setState({
                shouldHide: false 
            })
        }
    },
render: function() {
    return (
      <div>
        <button onClick={this.onClick}>click me</button>
        <p className={this.state.shouldHide ? 'hidden' : ''} >yoyoyoyoyo</p>
      </div>
    );
}
});

ReactDOM.render( <Search /> , document.getElementById('container'));

Une méthode simple pour afficher / masquer des éléments dans React à l'aide de crochets

const [showText, setShowText] = useState(false);

Maintenant, ajoutons un peu de logique à notre méthode de rendu:

{showText && <div>This text will show!</div>}

Et

onClick={() => setShowText(!showText)}

Bon travail.

Dans certains cas, un composant d'ordre supérieur peut être utile:

Créez un composant d'ordre supérieur:

export var HidableComponent = (ComposedComponent) => class extends React.Component {
    render() {
        if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
            return null;
        return <ComposedComponent {...this.props}  />;
    }
};

Étendez votre propre composant:

export const MyComp= HidableComponent(MyCompBasic);

Ensuite, vous pouvez l'utiliser comme ceci:

<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />

Cela réduit un peu le passe-partout et impose de respecter les conventions de dénomination, mais sachez que MyComp sera toujours instancié - la façon d'omettre est mentionnée plus tôt:

{ !hidden && <MyComp ... /> }

Utiliser le module rc-if-else

npm install --save rc-if-else

import React from 'react';
import { If } from 'rc-if-else';

class App extends React.Component {
    render() {
        return (
            <If condition={this.props.showResult}>
                Some Results
            </If>
        );
    }
}

Utiliser ref et manipuler CSS

Une façon pourrait être d'utiliser React refet de manipuler la classe CSS à l'aide de l'API du navigateur. Son avantage est d'éviter de restituer dans React si le seul but est de masquer / afficher certains éléments DOM en cliquant sur un bouton.

// Parent.jsx
import React, { Component } from 'react'

export default class Parent extends Component {
    constructor () {    
        this.childContainer = React.createRef()
    }

    toggleChild = () => {
        this.childContainer.current.classList.toggle('hidden')
    }

    render () {
        return (
            ...

            <button onClick={this.toggleChild}>Toggle Child</button>
            <div ref={this.childContainer}>
                <SomeChildComponent/>
            </div>

            ...
        );
    }
}


// styles.css
.hidden {
    display: none;
}

PS Corrigez-moi si je me trompe. :)

Si vous utilisez bootstrap 4, vous pouvez masquer l'élément de cette façon

className={this.state.hideElement ? "invisible" : "visible"}

Cela peut également être réalisé comme ceci (moyen très simple)

 class app extends Component {
   state = {
     show: false
   };
 toggle= () => {
   var res = this.state.show;
   this.setState({ show: !res });
 };
render() {
  return(
   <button onClick={ this.toggle }> Toggle </button>
  {
    this.state.show ? (<div> HELLO </div>) : null
  }
   );
     }

cet exemple montre comment vous pouvez basculer entre les composants en utilisant une bascule qui bascule après chaque 1 seconde

import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Component1 = () =>(
  <div>
    <img 
src="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" />
   </div>
)

const Component2 = () => {
  return (
    <div>
       <img 
src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2e/12ccse.jpg/250px- 
12ccse.jpg" />
  </div>
   )

 }

 class App extends Component {
   constructor(props) {
     super(props);
    this.state = { 
      toggleFlag:false
     }
   }
   timer=()=> {
    this.setState({toggleFlag:!this.state.toggleFlag})
  }
  componentDidMount() {
    setInterval(this.timer, 1000);
   }
  render(){
     let { toggleFlag} = this.state
    return (
      <Fragment>
        {toggleFlag ? <Component1 /> : <Component2 />}
       </Fragment>
    )
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Utilisez cette syntaxe allégée et courte:

{ this.state.show && <MyCustomComponent /> }

Voici la solution simple, efficace et la meilleure avec un composant React sans classe pour afficher / masquer les éléments. Utilisation de React-Hooks qui est disponible dans le dernier projet create-react-app qui utilise React 16

import React, {useState} from 'react';
function RenderPara(){
const [showDetail,setShowDetail] = useState(false);

const handleToggle = () => setShowDetail(!showDetail);

return (
<React.Fragment>
    <h3>
        Hiding some stuffs 
    </h3>
    <button onClick={handleToggle}>Toggle View</button>
   {showDetail && <p>
        There are lot of other stuffs too
    </p>}
</React.Fragment>)

}  
export default RenderPara;

Happy Coding :)

//use ternary condition

{ this.state.yourState ? <MyComponent /> : null } 

{ this.state.yourState && <MyComponent /> }

{ this.state.yourState == 'string' ? <MyComponent /> : ''}

{ this.state.yourState == 'string' && <MyComponent /> }

//Normal condition

if(this.state.yourState){
 return <MyComponent />
}else{
  return null;
}

Vous pouvez utiliser le fichier css

    var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className={`search-results ${this.state.showResults ? 'show' : ''}`}>
                Some Results
            </div>
        );
    }
})

et dans le fichier css

    .search-results {
     ...
     display: none
     &.show {
      display: block
   }
}

var Search= React.createClass({
 getInitialState: () => { showResults: false },
 onClick: () => this.setState({ showResults: true }),
 render: function () {
   const { showResults } = this.state;
   return (
     <div className="date-range">
       <input type="submit" value="Search" onClick={this.handleClick} />
       {showResults && <Results />}
     </div>
   );
 }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

class App extends React.Component {
  state = {
    show: true
  };

  showhide = () => {
    this.setState({ show: !this.state.show });
  };

  render() {
    return (
      <div className="App">
        {this.state.show && 
          <img src={logo} className="App-logo" alt="logo" />
        }
        <a onClick={this.showhide}>Show Hide</a>
      </div>
    );
  }
}