Mostrar u ocultar elemento en Reaccionar

Estoy jugando con React.js por primera vez y no puedo encontrar una manera de mostrar u ocultar algo en una página mediante un evento de clic. No estoy cargando ninguna otra biblioteca en la página, por lo que estoy buscando alguna forma nativa utilizando la biblioteca React. Esto es lo que tengo hasta ahora. Me gustaría mostrar los resultados div cuando se active el evento click.

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

Reaccionar hacia 2020

En la onClickdevolución de llamada, llame a la función de establecimiento del enlace de estado para actualizar el estado y volver a representar:

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

Reacciona alrededor de 2014

La clave es actualizar el estado del componente en el controlador de clics mediante setState. Cuando se aplican los cambios de estado, renderse llama nuevamente al método con el nuevo estado:

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>

Aquí hay una sintaxis alternativa para el operador ternario:

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

es equivalente a:

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

Inclinarse por qué

También sintaxis alternativa con display: 'none';

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

Sin embargo, si usa en exceso display: 'none', esto conduce a la contaminación DOM y, en última instancia, ralentiza su aplicación.

Aquí está mi enfoque.

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

En el código anterior, para lograr esto, estoy usando código como:

{opened && <SomeElement />}

Eso rendirá SomeElementsolo si openedes cierto. Funciona debido a la forma en que JavaScript resuelve las condiciones lógicas:

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

Razones para usar este enfoque en lugar de CSS 'display: none';

• Si bien puede ser 'más barato' ocultar un elemento con CSS, en ese caso, el elemento 'oculto' todavía está 'vivo' en el mundo de reacción (lo que podría hacer que sea mucho más caro)
  • significa que si <TabView>cambian los accesorios del elemento padre (p. ej. ), incluso si solo ve una pestaña, las 5 pestañas se volverán a representar
  • el elemento oculto aún podría tener algunos métodos de ciclo de vida en ejecución, por ejemplo. puede obtener algunos datos del servidor después de cada actualización, incluso si no es visible
  • el elemento oculto podría bloquear la aplicación si recibe datos incorrectos. Puede suceder ya que puede 'olvidarse' de los nodos invisibles al actualizar el estado
  • por error, puede establecer un estilo de 'visualización' incorrecto al hacer visible el elemento, por ejemplo. algunos div son 'display: flex' por defecto, pero configurará 'display: block' por error, lo display: invisible ? 'block' : 'none'que podría romper el diseño
  • el uso someBoolean && <SomeNode />es muy simple de entender y razonar, especialmente si su lógica relacionada con mostrar algo o no se vuelve compleja
  • en muchos casos, desea 'restablecer' el estado del elemento cuando vuelve a aparecer. p.ej. Es posible que tenga un control deslizante que desee establecer en la posición inicial cada vez que se muestre. (si ese es el comportamiento deseado para mantener el estado del elemento anterior, incluso si está oculto, lo que es raro en la OMI; de hecho, consideraría usar CSS si recordar este estado de una manera diferente sería complicado)

con la versión más reciente, react 0.11, también puede devolver nulo para que no se muestre contenido.

Renderizado a nulo

Creé un pequeño componente que maneja esto por usted: react-toggle-display

Establece el atributo de estilo display: none !importantsegún los accesorios hideo show.

Ejemplo de uso:

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

Ya hay varias respuestas excelentes, pero no creo que se hayan explicado muy bien y varios de los métodos proporcionados contienen algunas trampas que podrían hacer tropezar a las personas. Así que voy a repasar las tres formas principales (más una opción fuera del tema) para hacer esto y explicar los pros y los contras. Principalmente escribo esto porque la opción 1 se recomendó mucho y hay muchos problemas potenciales con esa opción si no se usa correctamente.

Opción 1: Representación condicional en el padre.

No me gusta este método a menos que solo vayas a representar el componente una vez y lo dejes allí. El problema es que hará que reaccione para crear el componente desde cero cada vez que cambie la visibilidad. Aquí está el ejemplo. LogoutButton o LoginButton se representan condicionalmente en el LoginControl primario. Si ejecuta esto, notará que se llama al constructor con cada clic en el botón. 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')
);

Ahora React es bastante rápido para crear componentes desde cero. Sin embargo, todavía tiene que llamar a su código al crearlo. Entonces, si el código de su constructor, componentDidMount, render, etc. es costoso, entonces se ralentizará significativamente mostrando el componente. También significa que no puede usar esto con componentes con estado donde desea que se conserve el estado cuando está oculto (y restaurado cuando se muestra). La única ventaja es que el componente oculto no se crea hasta que se selecciona. Por lo tanto, los componentes ocultos no retrasarán la carga de la página inicial. También puede haber casos en los que DESEA un componente con estado para restablecer cuando se alterna. En cuyo caso esta es tu mejor opción.

Opción 2: Representación condicional en el niño

Esto crea ambos componentes una vez. Luego, cortocircuita el resto del código de renderizado si el componente está oculto. También puede cortocircuitar otra lógica en otros métodos usando el accesorio visible. Observe el archivo console.log en la página de 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')
);

Ahora, si la lógica de inicialización es rápida y los hijos no tienen estado, entonces no verá una diferencia en el rendimiento o la funcionalidad. Sin embargo, ¿por qué hacer que React cree un componente nuevo cada vez que se alterna? Sin embargo, si la inicialización es costosa, la Opción 1 la ejecutará cada vez que active un componente que ralentizará la página al cambiar. La opción 2 ejecutará todos los inits del componente en la carga de la primera página. Retrasando esa primera carga. Debe tener en cuenta de nuevo. Si solo muestra el componente una vez en función de una condición y no lo alterna, o desea que se restablezca cuando se activa, entonces la Opción 1 está bien y probablemente sea la mejor opción.

Sin embargo, si la carga lenta de la página es un problema, significa que tiene un código costoso en un método de ciclo de vida y que generalmente no es una buena idea. Puede, y probablemente debería, resolver la carga lenta de la página moviendo el costoso código de los métodos del ciclo de vida. Muévalo a una función asíncrona iniciada por ComponentDidMount y haga que la devolución de llamada la ponga en una variable de estado con setState (). Si la variable de estado es nula y el componente es visible, haga que la función de representación devuelva un marcador de posición. De lo contrario, renderice los datos. De esa manera, la página se cargará rápidamente y llenará las pestañas a medida que se cargan. También puede mover la lógica al padre y enviar los resultados a los niños como accesorios. De esa manera, puede priorizar qué pestañas se cargan primero. O guarde en caché los resultados y solo ejecute la lógica la primera vez que se muestre un componente.

Opción 3: Ocultar clase

La ocultación de clases es probablemente la más fácil de implementar. Como se mencionó, simplemente crea una clase CSS con display: none y asigna la clase en función del accesorio. La desventaja es que se llama el código completo de cada componente oculto y todos los componentes ocultos están conectados al DOM. (La opción 1 no crea los componentes ocultos en absoluto. Y la opción 2 corta el código innecesario cuando el componente está oculto y elimina el componente del DOM por completo). Parece que esto es más rápido al alternar la visibilidad según algunas pruebas realizadas por los comentaristas en otras respuestas pero no puedo hablar de eso.

Opción 4: un componente pero cambiar los accesorios. O tal vez ningún componente en absoluto y caché HTML.

Esta no funcionará para todas las aplicaciones y está fuera de tema porque no se trata de ocultar componentes, pero podría ser una mejor solución para algunos casos de uso que la ocultación. Digamos que tienes pestañas. Es posible escribir un componente React y simplemente usar los accesorios para cambiar lo que se muestra en la pestaña. También puede guardar el JSX en variables de estado y usar un accesorio para decidir qué JSX devolver en la función de representación. Si se debe generar el JSX, hágalo y almacénelo en caché en el padre y envíe el correcto como accesorio. O genere en el niño y almacénelo en el estado del niño y use accesorios para seleccionar el activo.

Esta es una buena manera de hacer uso del DOM virtual :

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

Ejemplo aquí

Usando ganchos 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>
  )
}

Ejemplo aquí

Establece un valor booleano en el estado (por ejemplo, 'mostrar)' y luego hace:

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

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

Las mejores prácticas están a continuación de acuerdo con la documentación:

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

Renderice el elemento solo cuando el estado sea válido.

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

Comienzo con esta declaración del equipo React:

En React, puede crear componentes distintos que encapsulan el comportamiento que necesita. Luego, puede renderizar solo algunos de ellos, dependiendo del estado de su aplicación.

La representación condicional en React funciona de la misma manera que las condiciones en JavaScript. Use operadores de JavaScript como if o el operador condicional para crear elementos que representen el estado actual y deje que React actualice la IU para que coincida con ellos.

Básicamente, debe mostrar el componente cuando se hace clic en el botón, puede hacerlo de dos maneras, usando React puro o usando CSS, usando la forma React pura, puede hacer algo como el siguiente código en su caso, por lo que en la primera ejecución, los resultados no se muestran como hideResultses true, pero al hacer clic en el botón, el estado cambiará y hideResultses falsey el componente se renderizará nuevamente con las nuevas condiciones de valor, este es un uso muy común de cambiar la vista de componentes en 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 desea seguir estudiando en representación condicional en React, eche un vistazo aquí .

Ejemplo simple de ocultar / mostrar con React Hooks: (pregunta por no tocar el violín)

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 desea ver cómo alternar la visualización de un componente, compruebe este violín.

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

Un método simple para mostrar / ocultar elementos en React usando ganchos

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

Ahora, agreguemos algo de lógica a nuestro método de renderizado:

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

Y

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

Buen trabajo.

En algunos casos, el componente de orden superior puede ser útil:

Crear componente de orden superior:

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}  />;
    }
};

Extienda su propio componente:

export const MyComp= HidableComponent(MyCompBasic);

Entonces puedes usarlo así:

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

Esto reduce un poco las repeticiones y obliga a apegarse a las convenciones de nomenclatura, sin embargo, tenga en cuenta que MyComp aún se instanciará: la forma de omitir se mencionó anteriormente:

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

Utilice el módulo 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>
        );
    }
}

Usa ref y manipula CSS

Una forma podría ser usar React refy manipular la clase CSS utilizando la API del navegador. Su beneficio es evitar volver a reproducir en React si el único propósito es ocultar / mostrar algún elemento DOM con solo hacer clic en un botón.

// 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;
}

PD Corrígeme si me equivoco. :)

Si usa bootstrap 4, puede ocultar el elemento de esa manera

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

Esto también se puede lograr de esta manera (de manera muy fácil)

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

Este ejemplo muestra cómo puede cambiar entre componentes mediante el uso de una palanca que cambia cada 1 segundo

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

Use esta sintaxis simple y corta:

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

Aquí viene la solución simple, efectiva y mejor con un componente de reacción sin clase para mostrar / ocultar los elementos. Uso de React-Hooks que está disponible en el último proyecto create-react-app que usa 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;
}

Puedes usar el archivo css

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

y en el archivo 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>
    );
  }
}