Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jakub Kašpar
Jakub Kašpar
16,383 Points
Posted by Jakub Kašpar
Jakub Kašpar
16,383 Points

React - How to use spread operator when passing state values to higher order component?

Hello everyone,

I want to ask how to use spread operator when passing state values to higher order component.

I have an onSubmit method where I am passing state values up like so:

  onSubmit = (e) => {
    e.preventDefault();

    this.props.onAdd(this.state.name, this.state.description);
    this.setState({
      name: "",
      description: ""
    });
  }

And in the higher order component I am using the state like so:

  onGoalAdd = (name, description) => {
    this.state.goals.push({
      id: nextId,
      name: name,
      description: description
    });
    this.setState(this.state);
    nextId += 1;
  }

  render() {
    return(
       <GoalFormDefine onAdd={this.onGoalAdd} />
    );
  }

I want to use spread operator to pass the whole state and do something like:

  onSubmit = (e) => {
    e.preventDefault();

    this.props.onAdd(...this.state);
    this.setState({
      name: "",
      description: ""
    });
  }

  onGoalAdd = (...values) => {
    this.state.goals.push({
      id: nextId,
      name: values.name,
      description: values.description
    });
    this.setState(this.state);
    nextId += 1;
  }

  render() {
    return(
       <GoalFormDefine onAdd={this.onGoalAdd} />
    );
  }

Unfortunately that doesn't work. Does anybody knows how to make it work?

Thanks for all your help, Jakub

2 Answers

Rogier Nitschelm
seal-mask
.a{fill-rule:evenodd;}techdegree
Rogier Nitschelm
iOS Development Techdegree Student 5,461 Points
Rogier Nitschelm
.a{fill-rule:evenodd;}techdegree
Rogier Nitschelm
iOS Development Techdegree Student 5,461 Points

You are right! It can be done with it. I also believe it is the most elegant way of grabbing lots of arguments from a function. That said I do not often have functions with more than 2-3 parameters usually (usually I send objects around, which can be destructured as well, but by referring to their keys, rather than indices).

Yes that's true! You have to treat the current state as if it is immutable - and always return a new value, rather than modify the current value.

const someFunc = (...args) => {
  const [arg1, arg2, arg3, ...rest] = args;

  console.log(arg1) // 1
  console.log(arg2) // 2
  console.log(rest) // ["a", "b", { "cow": "moo" }, ["cheeseburger", "pie"]]
}

someFunc(1, 2, 3, 'a', 'b', { cow: 'moo' }, ["cheeseburger", "pie"]); // 1 2 3
Jakub Kašpar
Jakub Kašpar
16,383 Points
Jakub Kašpar
Jakub Kašpar
16,383 Points

Thanks Rogier for your explanation.

Rogier Nitschelm
seal-mask
.a{fill-rule:evenodd;}techdegree
Rogier Nitschelm
iOS Development Techdegree Student 5,461 Points
Rogier Nitschelm
.a{fill-rule:evenodd;}techdegree
Rogier Nitschelm
iOS Development Techdegree Student 5,461 Points

You could try to destructure the arguments you passed into the function inside the onGoalAdd-method like so:

onGoalAdd = ({ name, description }) => {
  const { nextId } = this.state // assuming nextId is stored on the state. 
  this.setState({ name, description, id: nextId, nextId: nextId++ });
}

Also:

onGoalAdd = (name, description) => {
    this.state.goals.push({
      id: nextId,
      name: name,
      description: description
    });
    this.setState(this.state);
    nextId += 1;
  }

One tip is to never modify the state by doing using this.state.push etc. Instead you could just do the following:

this.setState({ goals: [...this.state.goals, { name, description, id: this.state.nextId,  } ] ) }) 
// assuming nextId is stored on the state
Jakub Kašpar
Jakub Kašpar
16,383 Points
Jakub Kašpar
Jakub Kašpar
16,383 Points

Thanks Rogier for your quick answer.

What I am really trying to do is to pass a lot of arguments and I thought that it can be done by a spread operator.

About your tip. Is that because we don't want to mutate our state?