when to return a function's value?

Question

i have been learning react js recently and there is this code, where my tutor uses this code to reset values in state...

  handleDelete = counterId => {
    const tempCounter = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters: tempCounter });
  };

  reset = () => {
    const resetCounters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({ counters: resetCounters });
  };

here in 'handleDelete' function my tutor didn't return value in 'tempCounter' variable, but in 'reset' function tutor returns the value of 'c', why ?

Answer 1

The arrow function inside the this.state.counter.filter() returns the boolean value of the expression c.id !== counterId . When you don't put the brackets "{}" after declaring an arrow function, it means what comes after the arrow "=>" is considered the return value of it.

Answer 2

This function:

  handleDelete = counterId => {
    const tempCounter = this.state.counters.filter(c => c.id !== counterId); // implicit return 
    this.setState({ counters: tempCounter });
  };

OR

handleDelete = counterId => {
  const tempCounter = this.state.counters.filter(c => {
    return c.id !== counterId; // explicit return 
  });
  this.setState({ counters: tempCounter });
};

More contrived example:

 const people = [ { name: 'Bob', age: 20 }, { name: 'Jane', age: 30 }, { name: 'Mike', age: 40 }, { name: 'Smith', age: 50 }, ]; const under35implicit = people.filter(person => person.age < 35) // same as const under35explicit = people.filter(person => { return person.age < 35 }) console.log(under35implicit) console.log(under35explicit) 

Does that make sense?

Answer 3

In an arrow function, if there is an expression after the arrow, it will be implicitly returned. If there are curly braces, then an explicit return statement is required to return a value. You could rewrite the first function like:

const tempCounter = this.state.counters.filter(c => {
    return c.id !== counterId
});

But it is more concise the first way.

The second function could also be reversed to use an explicit return, using spreading:

const resetCounters = this.state.counters.map(c => ({ ...c, value: 0 }));

We need to wrap the object in parentheses, otherwise it will become a function body contained in curly braces.

Answer 4

Look closely! The returned value c is not the return value of your function reset , but rather the return value of your function c => { c.value = 0; return c; } c => { c.value = 0; return c; } c => { c.value = 0; return c; } , which you used within this.state.counters.map as parameter.

This being clarified both functions reset and handleDelete don't return any values. They don't even have to, because they are most likely used as event handlers (button clicked, etc.). Therefore they trigger a state change by themselves with this.setState .