React Component Does Not Render With Curly Brackets

My react component does not render with curly bracket and here is the code: https://jsfiddle.net/69z2wepo/21704/ class R1 extends React.Component { render() { return (

Solution 1:

Your second example's map callback does not return anything.

If your method body contains a single statement, you may omit the {} and the result of the expression will be returned. Using x => x * 2 is fine, and will return a value.

If you include the{} around the method body, you cannot omit the return keyword, regardless of how many statements are inside the {}. Using x => { x * 2 } does not return anything, as the method body contains no return statement.

By way of example:

fn = x => x * 2console.log(fn(3)) // 6

fn = x => { x * 2 }
console.log(fn(3)) // undefined

fn = x => { return x * 2 }
console.log(fn(3)) // 6

Solution 2:

Since you are using ES6 the main syntax would be like

functionName() => {
    /* Code/Actions goes here */
}