Home / Questions / 148501
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-03-20 09:13:49 +0800 CST 2020-03-20 09:13:49 +0800 CST

How to send/return parameters between two or more components

  • 772

I would like to know how to send parameters/information between two or more components. For example, if a series of arithmetic operations are executed in a component or some request is going to be returned, whatever it may be POST, GET, return said value, to be used in another component and so on.

In my case, the operations are going to start in the child component, which calls , Componente_2the results of these, should be used in the other child, which calls Componente_3.

As I have investigated, I was able to know that Reactthe issue of inheritance exists very well defined, or so I understood it, and it must be respected, since there is a father, who communicates with many children.

Component_1.jsx (Parent)

class componente1 extends Component{
   //captura los valores iniciales
   //por teclados o de una API
   //los envia a los ficheros correspondiente
}

Component_2.jsx (Child)

class componente2 extends Component{
   //recibe los valores iniciales 
   //del componente 1
   //resolverá alguna operación y 
   //deberá retornar dicho resultado
   //al terminar la operacion
}

Component_3.jsx (Child)

class componente3 extends Component{
   //que exista la posibilidad de tomar los valores  
   //retornados del componente 2 al componente 1
   //para luego realizar una operación
   //y retornarlos al terminar
}

Note: I assume it doesn't matter if the files are in the same folder, as I consider that irrelevant to the process issue.

javascript

2 Answers

  1. To pass the info from one component to another you should preferably use props, here I explain a bit based on an example from https://reactjs.org/docs/components-and-props.html .

    Let's pretend that you are in the App.tsx (or Jsx) and you have imported the Welcome component, we will proceed to create it as if it were an Html tag and place the data that you need to pass with the property="value" syntax; once this is done you can call the data inside the component with {props.author.nameProps}

    In the app.tsx

    import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Welcome } from './Welcome ';
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

    In the Welcome.tsx

    class Welcome React.Component{

    constructor(props) {
    super(props);
    };

    public render() {
    return (
    <div> 
         <p>{props.name}</p>
    </div>
    }  
 }

    I hope I have been clear, I remain attentive to any questions. A happy day.

    • 2
  2. Best Answer

    What you need to do is communicate through from propsone component to another.

    First of all, to work on a parent component with what the other ( child ) component returns, you must have an event handler:

    handleResponseFromComponente2(response){
    ...
}

    And when you have to mount it, componente2pass it properties from the state of component1, like this:

    render() {
    ...
    <componente2 numero={this.state.num} operacion={this.state.op} onResponse={this.handleResponseFromComponente2.bind(this)} />
    ...
}

    And in the constructor of the componente2:

    React 15 and below

    (Documentation of this version)

    class componente2 extends Component{
    constructor(props){
        super(props);
        this.state = {
            numero: props.numero,
            operacion: props.operacion
        };
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.numero == this.state.numero && nextProps.operacion == this.state.operacion){
            return null;
        }
        else{
            this.setState({
                numero: nextProps.numero,
                operacion: nextProps.operacion
            });
        }
    }

    // Para invocar al evento en el padre:
    handleCalcula(e){
        ... // Lo que quieras hacer aquí
        this.props.onResponse(valorDeRespuesta);
    }
    ...
}

    React 16 and higher

    (Documentation of this version)

    class componente2 extends Component{
    constructor(props){
        super(props);
        this.state = {
            numero: null,
            operacion: null
        };
    }

    static getDerivedStateFromProps(nextProps, prevState){
        if(nextProps.numero == prevState.numero && nextProps.operacion == prevState.operacion){
            return null;
        }
        return{
            numero: nextProps.numero,
            operacion: nextProps.operacion
        }
    }

    handleCalcula(e){
        ...
        this.props.onResponse(valorDeRespuesta);
    }
    ...
}

    Notice the change from componentWillReceivePropsto static getDerivedStateFromProps. With this new version of React there are some considerations you need to keep up to date, which I recommend.

    • 1