Arrow function Syntax Problem

JavaScript
1

Arrow function syntax will be
(a,b,c) => { }
Like this right ?
But I have seen mosh sir writing the follow code in vidly project . I didnt get why he is using paranthesis instead of flower bracket

                    <thead>

                        <tr>

                            <th>Title</th>

                            <th>Genre</th>

                            <th>Stock</th>

                            <th>Rate</th>

                        </tr>

                    </thead>

                    <tbody>

                        {this.state.movies.map((movie) => (

                            <tr>

                                <td>{movie.title}</td>

                                <td>{movie.genre.name}</td>

                                <td>{movie.numberInStock}</td>

                                <td>{movie.dailyRentalRate}</td>

                            </tr>

                        ))}

                    </tbody>

                </table>

Thanks in advance

2

You don’t have to use curly braces if the arrow function returns a single statement. Here, the JSX expression is a single statement, but since its broken up into multiple lines, it has to be put between a pair of parenthesis.

if he wanted to use curly braces, he’d have to write his code like this:

 {this.state.movies.map((movie) => { 
                       return (
                            <tr>

                                <td>{movie.title}</td>

                                <td>{movie.genre.name}</td>

                                <td>{movie.numberInStock}</td>

                                <td>{movie.dailyRentalRate}</td>

                            </tr>
                       )
               }
    )
}

Notice that using this syntax, we have to use a return statement AND wrap the JSX code between a pair of parenthesis, because its broken up into multiple lines.

Since we have a single statement, we can avoid using the curly braces as well as the return statement, which is what mosh is doing here.

3

thanks my confusion got cleared

1 Like