¿Cómo pasar datos de un componente a otro componente en ReactJS?

En este artículo, vamos a ver cómo pasar datos de un componente a otro componente. Tenemos múltiples formas de pasar datos entre componentes. Podemos pasar datos de padre a hijo, de hijo a padre y entre hermanos. Así que ahora veamos cómo podemos hacerlo.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app myapp

• Paso 2: después de crear la carpeta de su proyecto, es decir, myapp, muévase a ella con el siguiente comando.

  cd myapp

Estructura del proyecto: Tendrá el siguiente aspecto. Hemos creado dos componentes llamados Child.js y Parent.js como se muestra a continuación.

Hemos creado dos componentes llamados Child.js y Parent.js como se muestra en la estructura anterior.

Pasar datos de padre a hijo:

Para pasar datos del componente padre al hijo, usamos props. Los datos de accesorios son enviados por el componente principal y no pueden ser modificados por el componente secundario ya que son de solo lectura.

Ejemplo: El siguiente ejemplo cubre cómo pasar datos del componente principal al secundario en ReactJS.

import React from 'react'
import Child from './Child';
  
const Parent = () => {
const data = "Hello Everyone";
    return(
        <div>
          <Child data={data}/>
        </div>
    );
}
  
export default Parent;

import React from 'react';
  
const Child = (props) => {
    return(
      <h2> {props.data} </h2>
    );
}
  
export default Child;

import React from 'react';
import "./index.css";
import Parent from './Parent'
  
const App = () => {
  return (
    <div className="App">
      <Parent/>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Pasar datos del componente secundario al principal:

Para pasar los datos del componente secundario al componente principal, debemos crear una función de devolución de llamada en el componente principal y luego pasar la función de devolución de llamada al componente secundario como accesorio. Esta función de devolución de llamada recuperará los datos del componente secundario. El componente secundario llama a la función de devolución de llamada principal mediante accesorios y pasa los datos al componente principal.

Ejemplo: El siguiente ejemplo cubre cómo pasar datos del componente secundario al principal en ReactJS.

import React from 'react';
import Child from './Child'
  
class Parent extends React.Component{    
    state = {
        msg: "",
    }
  
    handleCallback = (childData) =>{
        this.setState({msg: childData})
    }
  
    render() {
        const {msg} = this.state;
        return(
           <div>
             <h1> {msg}</h1>
             <Child parentCallback = {this.handleCallback}/>    
           </div>
        );
    }
}
  
export default Parent;

import React from "react";
  
class Child extends React.Component {
    onTrigger = () => {
      this.props.parentCallback("Welcome to GFG");
    };
  
    render() {
      return (
        <div>
          <br></br> <br></br>
          <button onClick={this.onTrigger}>Click me</button>
        </div>
      );
    }
}
  
export default Child;

import React from 'react';
import "./index.css";
import Parent from './Parent';
  
const App =() => {
  return (
    <div className="App">
      <Parent/>
    </div>
  );
}
  
export default App;

Producción:

Pasar datos entre hermanos:

Para pasar datos entre hermanos, existen varios métodos entre los que podemos elegir, como se muestra a continuación:

1. Combinación de los dos métodos anteriores (devolución de llamada y uso de accesorios).
2. Usando Redux.
3. API de contexto

Ejemplo: En este ejemplo, estamos pasando datos entre hermanos usando ContextAPI. Por lo tanto, tenemos un proyecto diferente para esto.

Estructura del proyecto: Tendrá el siguiente aspecto. Hemos creado dos componentes llamados Child1.js y Child2.js como se muestra a continuación.

import React, {createContext} from "react";
import Child2 from './Child2';
  
const Name = createContext();
  
const Child1 = () => {
    return (
      <>
        <Name.Provider value={'Archna'}>
        <Child2/>
        </Name.Provider>
      </>
    );
}
  
export default Child1;
export {Name};

import React from "react";
import { Name } from "./Child1";
  
const Child2 = () => {
    return (
      <>
        <Name.Consumer>
          {(fname) => {
            return <h1>My Name is {fname}</h1>;
          }}
        </Name.Consumer>
      </>
    );
};
  
export default Child2;

import React from 'react';
import "./index.css";
import Child1 from './Child1';
  
const App =() => {
  return (
    <div className="App">
      <Child1/>
    </div>
  );
}
  
export default App;

Producción: