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

user_4735742 0
Viewed 2887

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>

reactjs javascript
4 Answers

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})
user_23152800

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.

user_17363440

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);

user_3711840

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.

user_6792400
Related