React.js - communication between different components in separeted files

Question

I am building a page with React and I this have two Components, which one has a different function. First, ProfileFill, catching the form data and the second, ProfileFillPercent, that is in another file and makes an average of the form fill.

ProfileFill.js:

import React from 'react';
import ReactDOM from 'react-dom';

export const CustomerFill = React.createClass({
handleChange() {
    const customerName = this.customerName.value;
    const customerCPF = this.customerCPF.value;

    this.props.onUserInput(customerName, customerCPF);
},
render(){
    const {customerName, customerCPF} = this.props;
    return(
        <div>
            <div className="form-group col-sm-12 col-md-5">
                <label htmlFor="inputName">Nome do segurado:</label>
                <input 
                    ref={(r) => this.customerName = r}
                    type="text" 
                    className="form-control" 
                    placeholder="Insira o nome do segurado" 
                    value={customerName} 
                    onChange={this.handleChange} 
                />
            </div>
            <div className="form-group col-sm-12 col-md-5">
                <label htmlFor="inputName">CPF do segurado:</label>
                <input 
                    ref={(r) => this.customerCPF = r}
                    type="number" 
                    className="form-control" 
                    placeholder="Insira o CPF do segurado" 
                    value={customerCPF} 
                    onChange={this.handleChange} 
                />
            </div>
        </div>
    )
   }
});

export const ProfileFill = React.createClass({
getInitialState() {
    return{
        customerName: '',
        customerCPF: '',
    };
},

handleUserInput(customerName, customerCPF) {
    this.setState({
        customerName: customerName,
        customerCPF: customerCPF,
    });

},

render(){

    const { customerName, customerCPF } = this.state;
    this.xpto = this.state;
    console.log(this.xpto);
    return(
        <div>
            <div className="lateral-margin">
                <h2>INFORMAÇÕES PESSOAIS</h2>
            </div>
            <div id="profile-fill" className="intern-space">
                <form id="form-space">
                        <CustomerFill 
                            customerName={customerName} 
                            customerCPF={customerCPF} 
                            onUserInput={this.handleUserInput}
                        />
                </form>
            </div>
        </div>
    );
 }
});

ReactDOM.render(
   <ProfileFill />,
document.getElementById('fill-container')
);

export default ProfileFill;

ProfileFillPercent.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ProfileFill from './profileFill.js';

console.log(ProfileFill.xpto);
export const ProfileFillPercent = React.createClass({
   render() {
  //things happen here
  }
});

I am creating a variable to, this an element of ProfileFill and I need passing it to ProfileFillPercent that is in another file. I am tried to pass it with singleton pattern, like this Stack explanation, however, it is not working. Any idea how can I communicate this both components which are not parents, but share the same single data? In this case, xpto is the data that stored the state of ProfileFill.

Answer 1

Think you are getting close.

Bit confused though, so I will explain briefly, the 3 ways:

• ProfileFill(Child) needs data to be passed into ProfileFillPercent (Parent).

  Ans:

  • You can pass a function as prop from the parent which accepts an argument, and can be used to send the data from the child to the parent on calling it.

  • You can make a parent container for both and pass the required data from top as props.

• ProfileFillPercent (Parent) needs data to be passed into ProfileFill(child).

  Ans:

  • You can pass it directly as props from the Parent.

  • You can use Redux (Preferably bigger applications)

Answer 2

I had a similar situation and started to use Redux.

There are a lot of posts saying that you might not need Redux: https://www.drinkingcaffeine.com/dan-abramov-you-might-not-need-redux/

For me, if you have an application that has to pass many data between brother components you may need use Redux.

Using Redux you can save the state of customer list and avoid ajax everytime your component is loaded. So you can reduce your code and debug it better.

I started studying Redux with this video tutorial from Dan Abramov: https://egghead.io/lessons/javascript-redux-writing-a-counter-reducer-with-tests

Answer 3

You can introduce the PubSub to communication between React components. For react, there is the react-pubsub

Answer 4

You'll want to lift the state up. From Facebook's React docs:

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

In your case, I assume there is some parent component that renders both ProfileFill and ProfileFillPercent as child components. Set the state in the parent component, and pass this state down to the children as props.

If you need to mutate state in the child components, follow this pattern to pass setState functions down as props.