map method, after => using a () what it accomplish

Question

In react I am building an app.

I have a question at :

          {movies.map((movie) => (
            <MovieCard movie={movie} />
          ))}
        </div>

What does () do after => Until now I always use {} after =>

I am confused could you explain me or put a link of a documentation about that.

When I use () my app work but if i use {} I got nothing in return.

My code is Here:

const App = () => {
  // function doubleNumbers(arr) {
  //   arr.map(()=>{})
  // }
  // console.log(doubleNumbers([2, 5, 10]));

  const [movies, setMovies] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");

  useEffect(() => {
    searchMovies("batman");
  }, []);
  const searchMovies = async (title) => {
    const response = await fetch(`${API_URL}&s=${title}`);
    const data = await response.json();
    setMovies(data.Search);
  };

  return (
    <div className="app">
      <h1>MovieLand</h1>
      <div className="search">
        <input
          type="text"
          placeholder="Search for movies"
          // value degistirmeyi nunutmusum yapilir
          value={searchTerm}
          onChange={(e) => {
            setSearchTerm(e.target.value);
          }}
        />
        <img
          src={SearchIcon}
          alt="search"
          onClick={() => searchMovies(searchTerm)}
        />
      </div>

      {/* ?. Optional Chaining */}
      {movies?.length > 0 ? (
        <div className="container">
          {/* pk j(utillise ds map () au lieu de {} ??? */}
          {movies.map((movie) => (
            <MovieCard movie={movie} />
          ))}
        </div>
      ) : (
        <div className="empty">
          <h2>No movies found</h2>
        </div>
      )}
    </div>
  );
};

export default App;

Answer 1

If you are using {} you have to use the return keyword , whereas if you are using () you don't have to use the return keyword