0

Ive spent the last 20 or so hours trying to figure out how to do this, so any advise would be greatly appreciated.

What I am trying to do is in my presentational components, call a method that is passed down from a higher order component, and that method will then mutate the state which is handled in the higher container.

My higher order container looks like this:

export default class TodayContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {goalItems: [{id: 1, goal: "Pet the dog"}, {id: 2, 
    goal: "feed the cat"}, {id: 3, goal: "other good stuff"}]};

    this.goalSave = this.goalSave.bind(this);

  }

  goalSave(goal) {
    let stateCopy = Object.assign({}, this.state);
    stateCopy.goalItems[key].goal = goal;
    this.setState(stateCopy); }

render() {
    return (
      <Today goalItems={this.state.goalItems}
             goalSave={this.goalSave}/>
    )}}

There's a problem there in the goalSave method with [key] that i haven't yet figured out how to map the correct array value, (happy for advise there too), but I haven't gotten to debug that yet as I can't correctly pass any method down.

My Props get passed down through several presentational containers. Here is where I first do something with them.

  CreateGoalItems() {
    const goalObjects = this.props.goalItems;
    if( goalObjects === undefined ) {
      return <div>Loading...</div>
    }

    let test = [];
     Object.keys(goalObjects).forEach(function(key) {

     test.push(<GoalItem key={goalObjects[key].id}
       goal={goalObjects[key].goal}
       goalSave={this.props.goalSave} />)   //**Doesn't Work ***
    });
    return test;
  }

In the above, I am able to correctly pass down goal, but I cannot figure out how to pass down the method. I had no trouble doing so when I had only a single object in state instead of an array, but with the array I'm not sure how to bind that method to that particular instance of my GoalItem component. I get the "this.props.goalSave is not a function" error.

Note: I get the same error if passing down a function like 

doNothing() {
  console.log("This did nothing");
}

I'm pretty lost. Thank you in advance for any help.

Chris Hudson
  • 5
  • 1
  • 4
  • Is that `this.goalSave = this.goalSave.bind(this);` line really in the place you posted? That should be inside your constructor. – Jacob Dec 20 '17 at 00:55
  • Sorry, no I'll fix it. I simplified everything for the question and mistyped it. – Chris Hudson Dec 20 '17 at 01:03

1 Answers1

0

Have you tried saving a reference of the goalSave function before passing it in from the props?

CreateGoalItems() {
    const goalObjects = this.props.goalItems;
    const goalSave = this.props.goalSave;     
    if( goalObjects === undefined ) {
        return <div>Loading...</div>
    }

    let test = [];
    Object.keys(goalObjects).forEach(function(key) {
        test.push(<GoalItem key={goalObjects[key].id}
        goal={goalObjects[key].goal}
        goalSave={goalSave} />) 
    });
    return test;
}
mckuok
  • 744
  • 6
  • 11