How to pass data from one component to another ReactJS

Question

I have two components. The first has state initialized:

import React from 'react';

class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div prop={this.state.data}>{this.state.data}</div>  
        );
    }
}

export default One;

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>{this.prop}</div>     
        );
    }
}

export default Two;

The first component prints out the state of data. How would I pass that value into my second component as a read only value and render it?

Answer 1

To pass the value in the second component, you have to first import it in your first component and pass the value as prop.

For example, your code might look like this:

import React from 'react';
import Two from './Two' // I am assuming One.js and Two.js are in same folder.

class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div>
               <div>{this.state.data}</div>
               <Two value={this.state.data} />
            </div>
        );
    }
}

export default One;

And then in the Two.js you can access the value as below:

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>{this.props.value}</div>     
        );
    }
}

export default Two;

Now, let's say, you are using your component One in App or anywhere. Whenever you will use <One/> you will get following in the browser:

hi
hi

Answer 2

You must call this 'Two' component into 'One' like this

One Component:

render() {
  return (
     <Two myProp={this.state.data} />
  )
}

You can call this whatever u wish (myProp)

And read this in 'Two' component:

render() {
  return (
     <div>Received data from parent Component: {this.props.myProp}</div>
  )
}

Before you call 'Two' component into 'One' you must import that file

import Two from './path/to/component';