Difference between {} and () with .map with Reactjs

Question

I've tried to search around on here and other places for some answers, but I can't seem to find anything. I'm going through a 'full stack react' PDF and in one example we build out a product list using .map(). But they use it like this:

const allNames = names.map((name) => (
   <Name key={name.name} name={name.name} />
));

Where I'm used to using it like this:

const allNames = names.map((name) => {
  <Name key={name.name} name={name.name} />
});

Using it the second way nothing is shown on the page. Why is this? I'm inclined to think it has something to do with the way the array of objects is stored in state. You can see the full code below. Thanks guys.

class Name extends React.Component {
  render() {
    return (
      <li>{this.props.name}</li>
    );
  }
}

class NameList extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      names: [
        {
          name: 'dan' 
        },
        {
          name: 'fred' 
        }
      ]
    }
  }
  
  render() {
    const { names } = this.state;
    const allNames = names.map((name) => (
      <Name key={name.name} name={name.name} />
    ));
    
    return (
      <div className='class-list'>
        {/*<NewName addName={this.addName} />*/}
        <ul className='new-name'>
          {allNames}
        </ul>
      </div>
    );
  }
}

class FilteredNameList extends React.Component {
  render() {
    return (
      <div>
        <NameList 
          names={this.props.names}
        />
        {/*<FilterNames />*/}
      </div>
    );
  }
}

ReactDOM.render(
  <FilteredNameList />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

bennygenel · Accepted Answer · 2017-10-05 18:58:18Z

22

The difference is not related to react directly its ES6 Arrow functions syntax.

If you use regular parenthesis, it is equevalent to returning some value so

() => {return 'someValue';}

is equal to

() => ('someValue')

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// A function with no parameters should be written with a pair of parentheses.
() => { statements }

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

edited Oct 5, 2017 at 18:58

answered Oct 5, 2017 at 18:52

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

justDan Over a year ago

Ahh ok this made the most sense after reading "If you use regular parenthesis, it is equevalent to using {return 'someValue';}". Thanks!

Mike Cluck · Accepted Answer · 2017-10-05 18:58:48Z

7

When you start the body of an arrow function with braces, the arrow function can have multiple statements and does not return the value of the expression in it automatically. With parentheses, it can only have one expression and it returns the value of that expression.

const names = ['A', 'B', 'C'];
const first = names.map(name => name.toLowerCase());
const second = names.map(name => {
  name.toLowerCase(); // Notice that this doesn't do anything
  // And you need a return statement to get a value back
  return 'X';
});

console.log(first);
console.log(second);

edited Oct 5, 2017 at 18:58

answered Oct 5, 2017 at 18:54

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

1 Comment

justDan Over a year ago

Updated that console.log to what I actually tried. And thanks for the answer, that does make sense now.

nathan hayfield · Accepted Answer · 2017-10-06 17:31:37Z

7

If you use () then you can only have 1 jsx component in what follows. If you use {} then you can have more lines of code and then add a return statement to end it.

edited Oct 6, 2017 at 17:31

answered Oct 5, 2017 at 18:52

nathan hayfield

2,7051 gold badge20 silver badges29 bronze badges

1 Comment

justDan Over a year ago

Updated the console.log line to what I actually tried in my code. Makes perfect sense now and also thanks for answering.

Haroldo_OK · Accepted Answer · 2017-10-05 18:52:39Z

1

The described problem dos not seem to be really related to () versus {}: * In the first case, you are generating HTML code; * In the second case, you are just sending something to the Javascript console.

answered Oct 5, 2017 at 18:52

Haroldo_OK

7,3033 gold badges50 silver badges86 bronze badges

1 Comment

justDan Over a year ago

That was just a quick example of how I would use it, but if I applied the same syntax to the react code, I'd get nothing. I'll edit the post quick.

Collectives™ on Stack Overflow

Difference between {} and () with .map with Reactjs

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related