CODEWITHSUNDEEP
reactjs
Josh Winters
Josh Winters

Reputation: 855

Retrieving data in children components from the parent

I have a parent component that is pulling in 3 children. I have set the state of the parent with an external data call using axios.

The problem i am currently having is, what syntax do i use on the child component to pull in the state data from the parent?

var Component_1 = React.createClass({

render(){
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 1</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 1</h6>
            </div>
        </div>
        );
    }
});

var Component_2 = React.createClass({

render(){
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 2</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 2</h6>
            </div>
        </div>
        );
    }
});


var Component_3 = React.createClass({

render(){
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 3</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 3</h6>
            </div>
        </div>
        );
    }
});



var Parent_Component = React.createClass({

getInitialState: function(){
    return{
        data: []
    }
},

componentDidMount: function(){
    var _this = this;
    this.serverRequest = axios.get("external data call").then(function(result){
        _this.setState({
            data: result.data
        });
    })
},

componentWillUnmount: function(){
    this.serverRequest.abort();
},

render() {
    return (
        <div className="col-sm-12">
            <Component_1></Component_1>
            <Component_2></Component_2>
            <Component_3></Component_3>
        </div>
    );

}
});

ReactDOM.render(<Parent_Component />,
document.getElementById("component"))

Upvotes: 0

Views: 57

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

Send it with props?

var Component_1 = React.createClass({

render(){
    console.log(this.props.data)
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 1</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 1</h6>
            </div>
        </div>
        );
    }
});

var Component_2 = React.createClass({

render(){
    console.log(this.props.data)
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 2</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 2</h6>
            </div>
        </div>
        );
    }
});


var Component_3 = React.createClass({

render(){
    console.log(this.props.data)
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 3</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 3</h6>
            </div>
        </div>
        );
    }
});



var Parent_Component = React.createClass({

getInitialState: function(){
    return{
        data: []
    }
},

componentDidMount: function(){
    var _this = this;
    this.serverRequest = axios.get("external data call").then(function(result){
        _this.setState({
            data: result.data
        });
    })
},

componentWillUnmount: function(){
    this.serverRequest.abort();
},

render() {
    return (
        <div className="col-sm-12">
            <Component_1 data={this.state.data}></Component_1>
            <Component_2 data={this.state.data}></Component_2>
            <Component_3 data={this.state.data}></Component_3>
        </div>
    );

}
});

ReactDOM.render(<Parent_Component />,
document.getElementById("component"))

If you want to have this data in state of children, you can create stateble children components and set in on constructor.

class Component_1 extends React.Component{
    constructor(){
        super()
        this.state={
            data: this.props.data
        }
    }
    redner() ....

Upvotes: 1

Related Questions