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 as 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';

Answer 3

Just add the following code in One component render method and pass the data as props which is read-only

import React from 'react';
import Two from '/components/Two'
class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

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

export default One;

Then In component Two to access data add following code

import React from 'react';

class Two extends React.Component {
constructor(props){
super(props)
}

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

export default Two;

Props will hold the object transferred from parent element

Answer 4

One.js

import React from 'react';
import Two from './two'
class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

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

export default One;

Two.Js

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>Component Two data: {this.props.dto.data}</div>     
        );
    }
}

export default Two;