React State

Estado

A nivel de la clase se agrega una propiedad llamada state = { }
en donde se define el comportamiento por default de un componente

Para ejecutar un click en una funcion:

<button onClick={this.cambiarEstado.bind(this)}>Cambiar estado</button>

Importante utilizar la palabra bind(this) para vincular con el metodo
Entonces en el evento onclick puedes ejecutar un metodo de clase o una propiedad

 import React from 'react';  
 import './App.css';  
 //Funcion principal  
 function App() {  
  return (  
   <div className="App">  
    <Hello1 mytext="PROPIEDAD"/>  
    <Hello2 mytext="PROPIEDAD 2"/>  
    <Hello3 mytext="PROPIEDAD CLASE1"/>  
    <Hello3 mytext="PROPIEDAD CLASE2"/>  
    <Hello3 mytext="PROPIEDAD CLASE3"/>  
   </div>  
  );  
 }  
 //Componente desde una clase con props  
 class Hello3 extends React.Component{  
  state = {  
   show:true  
  }  
  //metodo de clase  
  cambiarEstado(){  
   this.setState({show:!this.state.show})  
  }  
  //propiedad de clase  
  cambiarEstadoOpc2 = () =>{  
   this.setState({show:!this.state.show})  
  }  
  render(){  
   if(this.state.show){  
    return(  
     <div>Funcion Clase: {this.props.mytext}  
      <button onClick={this.cambiarEstado.bind(this)}>Cambiar estado</button>  
      <button onClick={this.cambiarEstadoOpc2}>Cambiar estado Opc2 {this.props.mytext}</button>  
     </div>  
     )  
   }else{  
    return(  
     <React.Fragment>  
      <h3>No hay elementos</h3>  
    <button onClick={this.cambiarEstadoOpc2}>DesCambiar {this.props.mytext}</button>  
     </React.Fragment>  
    )  
   }  
  };  
 }  
 //Componente desde una Funcion anonima con props  
 const Hello2 = (props) => <div>  
  Funcion Anonima: {props.mytext}  
 </div>  
 //Componente desde una Funcion normal con props  
 function Hello1(props){  
  return <div id="hello">Funcion: {props.mytext}</div>  
 }  
 export default App;  

Fin