¿Cómo cambiar el estado del componente de reacción al hacer clic?

Cambiar el estado del componente React es útil cuando está trabajando en una aplicación de una sola página, simplemente reemplaza el contenido del componente existente para el usuario sin recargar la página web. 

Tenemos que establecer el valor de estado inicial dentro de la función constructora y establecer el controlador de eventos de clic del elemento sobre el que hacer clic, da como resultado un cambio de estado. Luego pase la función al controlador de clics y cambie el estado del componente dentro de la función usando setState . La función setState solía cambiar el estado del componente directamente o con el enfoque de devolución de llamada como se menciona a continuación.

Sintaxis:

this.setState({ stateName : new-state-value})

this.setState(st => {
  st.stateName = new-state-value
})

Ejemplo 1: Este ejemplo ilustra cómo cambiar el estado del componente al hacer clic.

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js:

import React, { Component } from 'react'
 
class App extends Component {
  constructor(props){
    super(props)
     
    // Set initial state
    this.state = {msg : 'Hi, There!'}
     
    // Binding this keyword
    this.handleClick = this.handleClick.bind(this)
  }
 
  handleClick(){
   
    // Changing state
    this.setState({msg : 'Welcome to the React world!'})
  }
   
  render(){
    return (
      <div>
        <h2>Message :</h2>
         
 
<p>{this.state.msg}</p>
 
 
         
        {/* Set click handler */}
        <button onClick={this.handleClick}>
          Click here!
        </button>
      </div>
    )
  }
}
 
export default App

Producción: 

Ejemplo 2: 

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js:

import React, { Component } from 'react'
 
class App extends Component {
  static defaultProps = {
    courseContent : [
      'JSX', 'React Props', 'React State',
      'React Lifecycle Methods', 'React Event Handlers',
      'React Router', 'React Hooks', 'Readux',
      'React Context'
    ]
  }
   
  constructor(props){
    super(props)
     
    // Set initial state
    this.state = {msg : 'React Course', content:''}
     
    // Binding this keyword
    this.handleClick = this.handleClick.bind(this)
  }
 
  renderContent(){
    return (
      <ul>
        {this.props.courseContent.map(content => (
          <li>{content}</li>
        ))}
      </ul>
    )
  }
 
  handleClick(){
   
    // Changing state
    this.setState({
      msg : 'Course Content',
      content : this.renderContent()
    })
  }
   
  render(){
    return (
      <div>
        <h2>Message :</h2>
         
 
<p>{this.state.msg}</p>
 
 
         
 
<p>{this.state.content}</p>
 
 
         
        {/* Set click handler */}
        <button onClick={this.handleClick}>
           Click here to know contents!
        </button>
      </div>
    )
  }
}
 
export default App

Producción: