¿podría decirme cómo ocultar el componente en reactJS y mostrar otro componente? Tengo un botón y texto (hello). Al hacer clic en el botón, quiero ocultar el botón, así como el texto y mostrar otro texto {{ X1}} aqui esta mi codigo https://codesandbox.io/s/50lj63xvk

showBankDetail = () => {
    console.log("====");
    this.setState({
      validForm: true
    });
  };
  render() {
    const validForm = !this.state.validForm;
    return { validForm } ? (
      <div>
        heloo<button onClick={this.showBankDetail}>hide</button>
      </div>
    ) : (
      <div>bye</div>
    );
  }
0
naveen 1 mar. 2018 a las 04:18

3 respuestas

La mejor respuesta

Una forma es ponerlo primero en una variable separada

showBankDetail = () => {
  console.log("====");
  this.setState({
    validForm: true
  });
};

render() {
  const validForm = !this.state.validForm;
  let form;
  if (validForm) {
    form = (<div>
            heloo<button onClick={this.showBankDetail}>hide</button>
          </div>);
  } else {
    form = (<div>bye</div>);
  }
  return ({form});
}
0
Bk Santiago 1 mar. 2018 a las 01:27

{ validForm } está creando un objeto con la propiedad validForm y el valor de validForm (por ejemplo, verdadero o falso). Puede leer más al respecto aquí. Tu código debería verse así

showBankDetail = () => {
  console.log("====");
  this.setState({
    validForm: true
  });
};
render() {
  const validForm = !this.state.validForm;
  return validForm ? (
    <div>
      heloo<button onClick={this.showBankDetail}>hide</button>
    </div>
  ) : (
    <div>bye</div>
  );
}
0
Pixeladed 1 mar. 2018 a las 01:25

Hay algunas cosas que debes mirar. En primer lugar, desea alternar el estado validForm, así que hágalo en la función showBankDetail. Puede devolver diferentes elementos basados en validForm, pero también puede hacerlo en línea. Ver:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      validForm: false
    };
  }
  showBankDetail = () => {
    this.setState({
      validForm: !this.state.validForm
    });
  };
  render() {
    return (
      <div>
        { this.state.validForm ?
          <div>heloo</div> :
          <div>bye</div>
        }
        <button onClick={this.showBankDetail}>hide</button>
      </div>
    )
  }
}
0
jens 1 mar. 2018 a las 01:28