Difference between {} and () with .map in Javascript or React

This comes from ES6 Arrow functions syntax.

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

() => {return 'someValue';}

// is equal to

() => ('someValue')

So when you have a React component like so:

function LanguagesNav({ selected, onUpdateLanguage }) {
  const languages = ['All', 'Javascript', 'Ruby', 'Java', 'CSS', 'Python'];
  return (
    <ul className="flex-center">
      {languages.map((language, index) => (
        <li key={index}>
          <button
            style={language === selected ? { color: 'rgb(187, 46,31' } : null}
            className="btn-clear nav-link"
            onClick={() => onUpdateLanguage(language)}
          >
            {language}
          </button>
        </li>
      ))}
    </ul>
  );
}

It’s the same thing as:

function LanguagesNav({ selected, onUpdateLanguage }) {
  const languages = ['All', 'Javascript', 'Ruby', 'Java', 'CSS', 'Python'];
  return (
    <ul className="flex-center">
      {languages.map((language, index) => {
        return(
        <li key={index}>
          <button
            style={language === selected ? { color: 'rgb(187, 46,31' } : null}
            className="btn-clear nav-link"
            onClick={() => onUpdateLanguage(language)}
          >
            {language}
          </button>
        </li>
      )})}
    </ul>
  );
}

Join my newsletter

If you want to receive my latest essays and interesting finds subscribe to my list: