passing state of child component

Question

So I have a component "itemSelection" and inside of it I map through an api response like this

<div className="row">
     {this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
</div>

Here the state of "Item" component

constructor(props){
        super(props);
        this.state = {
          visible: false,
          selected: false,
        }
    }

How could I pass the state of "Item" component to "itemSelection" component?

You most likely need to pass a callback from `ItemSelection` to `Item`. Can you paste the full code for both components ? Thanks — klugjo, Sep 12 '18 at 09:06
Why are you posting same question again and again. Your earlier question https://stackoverflow.com/questions/52305225/passing-state-from-a-child-to-parent-component/52305284#52305284 already has answers from people. Even I answered an hour before — Hemadri Dasari, Sep 13 '18 at 05:24

score 0 · Answer 1 · answered Sep 12 '18 at 09:11

0

Sending data back up to your parent component should be done by using props. Fairly common question, see this post for the long answer.

answered Sep 12 '18 at 09:11

Kristoffer Lund

209
3
14

I need to pass the state of the child to the parent not the opposite – develop05 Sep 12 '18 at 09:20
@Gazzar2 that's exactly what I'm describing here? You have to take the state and pass ut upwards as a prop. This video also describes the solution: https://www.youtube.com/watch?v=AnRDdEz1FJc – Kristoffer Lund Sep 12 '18 at 10:34

Hemant · Answer 2 · 2018-09-13T05:20:11.473

As according to me, If I understood your question you want to call the state of the child component to the parent component.

//Child.js

import s from './Child.css';

class Child extends Component {
 getAlert() {
    alert('clicked');
 }
 render() {
  return (
    <h1 ref="hello">Hello</h1>
  );
 }
}

export default withStyles(s)(Child);

//Parent.js

class Parent extends Component {
 render() {

  onClick() {
    this.refs.child.getAlert()
  }

  return (
    <div>
      <Child ref="child" />
      <button onClick={this.onClick.bind(this)}>Click</button>
    </div>
  );
 }
}

Also, you can get the code reference from the link: https://github.com/kriasoft/react-starter-kit/issues/909

This a little tricky but Maybe, its help you solving your problem.

//Parent.js
class Parent extends Component {
    component(props) {
        super(props)

        this.state = {
            test: 'abc'
        }
    }

    ParentFunction = (value) => {
        this.state.test = value;
        this.setState(this.state);
    }

    render() {

        return (
            <div>
                <Child
                    test={this.state.test}
                    ParentFunction={this.ParentFunction}
                />
            </div>
        );
    }
}


//Child.js

import s from './Child.css';

class Child extends Component {
    component(props) {
        super(props)

        this.state = {
            test: props.test
        }
    }

    handleChange = () => {
        this.state.test = event.target.value;
        this.setState(this.state);
        this.handleOnSave()
    }

    handleOnSave = () => {
        this.props.ParentFunction(this.state.test);
    }

    render() {
        return (
            <div> 
                <input type="text" onChange={this.handleChange} />
            </div>
        );
    }
}

export default withStyles(s)(Child);

Thank you so much but what I want to use refs with the child state? lets say there a property in the child state called "selected: false". What if I want to like pass it to a property in the parent? should I make something like this "parentSelected: this.refs.child.state"? — develop05, Sep 13 '18 at 00:36

passing state of child component

2 Answers2