CODEWITHSUNDEEP
javascripthtmlreactjs
user6863891
user6863891

Reputation:

React pass data from same child to parent component multiple times

Hi I would like to pass data from same child to parent component multiple times.

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stateVariabes:null
    };
    // callback from parent
    this.props.onSelect(this.state);
  }

  handleChange(event) {
    const value =  event.target.value;
    this.setState(
      {
        stateVariabes: value
      },
      function() {
        console.log(this.state);
        // callback from parent
        this.props.onSelect(this.state);
      }
    );
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childOne: null,
      childList: [],
      childOther: null

    };
  }
  childCallbackFunction = childData => {
     // which child state shall I set here 
    this.setState({ weekDay: childData });
  };

  render() {
    return (
      <div className="App">
        <ChildComponent onSelect={this.childCallbackFunction} />
        <ChildComponent onSelect={this.childCallbackFunction} />
        <ChildComponent onSelect={this.childCallbackFunction} />
        <ChildComponent onSelect={this.childCallbackFunction} />
      </div>
    );
  }
}

When I use only of one the ChildComponent the update of state from child to parent works as expected but when I have multiple ChildComponent inside render of Parent the state update does not happen.

Can someone suggest whats the right way to achieve the task?

Upvotes: 0

Views: 474

Answers (2)

Gimnath
Gimnath

Reputation: 1070

This is how it should do it.

child=>

class ChildCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateVariabes: null
    };
  }

componentDidMount() {

this.onSelect()
}




  onSelect = () => {
    const value = 'some value coming from your event';
    this.props.trigger(value);
  };

Parent=>

class ParentCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childOne: null,
      childList: [],
      childOther: null,

    };
  }

  childCallbackFunction = childData => {
    // you can do anything with your child component values here
   console.log('child value: ', childData)
  };

  render() {
    return (
      <div className='App'>
        <ChildCom trigger={this.childCallbackFunction} />
        <ChildCom trigger={this.childCallbackFunction} />
        <ChildCom trigger={this.childCallbackFunction} />
        <ChildCom trigger={this.childCallbackFunction} />
      </div>

Upvotes: 0

Bruno Monteiro
Bruno Monteiro

Reputation: 4519

When using Class components, you need to bind your methods. From React documentation:

In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

So, in your case, your ChildComponent should have a 

this.handleChange = this.handleChange.bind(this);

You should also remove this from your constructor, since it is calling your callback on initialization:

// callback from parent
this.props.onSelect(this.state);

Here is a working example: https://codesandbox.io/s/intelligent-night-xlhzj

More information in this link.

Upvotes: 1

Related Questions