¿Cómo enviar estado/props a otro componente en React with onClick?

Los accesorios y el estado son los conceptos principales de React. En realidad, solo los cambios en los accesorios y/o el estado activan React para volver a renderizar sus componentes y potencialmente actualizar el DOM en el navegador.

Accesorios : le permite pasar datos de un componente principal a un componente secundario.

Estado : mientras que los accesorios le permiten pasar datos de un componente principal a un componente secundario, el estado se usa para cambiar el componente, bueno, el estado desde adentro. Los cambios en el estado también desenstringn una actualización de la interfaz de usuario.

Envío de estado/accesorios a otro componente mediante el evento onClick: primero almacenamos el estado/accesorios en el componente principal, es decir, en qué componente activamos el evento onClick. Luego, para pasar el estado a otro componente, simplemente lo pasamos como accesorio. Para una mejor comprensión mira este ejemplo.

Para componente basado en clases.

aplicación.js :

JavaScript

// First Component i.e. App
  
import React, { Component } from 'react';
import './App.css'
import Component2 from './Component2';
  
class App extends Component {  
  
    state={data:""}
  
    changeState =() => {  
      this.setState({data:`state/props of parent component 
      is send by onClick event to another component`}); 
         }; 
  
    render(){   
        return (     
            <div className="App">  
                <Component2 data={this.state.data} />   
                <div className="main-cointainer">
                    <h2>Compnent1</h2> 
          <button  onClick={this.changeState} type="button"> 
             Send state 
          </button>    
                </div>
            </div>   
        );          
    }}
  
    export default App; 

Component2.js:

JavaScript

import React from 'react';
  
const Component2 = (props) => {
    return (
        <div className="main-cointainer">
            <h2>Compnent2</h2> 
              
<p>{props.data} </p>
  
        </div>
    )
}
  
export default Component2;

Para componente basado en funciones.

Aplicación.js:

JavaScript

// First component i.e App
  
import React, { useState } from 'react';
import './App.css'
import Component2 from './Component2';
  
function App() {
  
    const [state, setstate] = useState({data:""})
  
    const changeState =() => {  
        setstate({data:`state/props of parent component 
        is send by onClick event to another component`}); 
       }; 
  
    return (  
        <div className="App">  
            <Component2 data={state.data} />   
            <div className="main-cointainer">
                <h2>Compnent1</h2> 
                <button  onClick={changeState} type="button">
                  Send state 
                </button>    
            </div>
        </div>                 
    );
 }
  
 export default App;

Component2.js:

JavaScript

// Second Component
import React from 'react';
import './Component2.css'
  
export default function Component2(props) {
    return (
        <div className="main-cointainer">
            <h2>Compnent2</h2> 
              
<p>{props.data} </p>
  
        </div>
    )
}

Producción :

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por naresh_saharan151 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

JavaScript

JavaScript

JavaScript

JavaScript

Deja una respuesta Cancelar la respuesta