useeffect doesn't render content

Question

I'm using a pretty simple component, that in future will map my backend objects and show them on page. So now I create temporary objects with useState, and the problem is that useEffect doesn't render it on the webpage.

import React, { Fragment, useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    setMovies({
      movieList: [
        { id: 1, title: "The Godfather" },
        { id: 2, title: "Apocalypse Now" },
      ],
    });
  }, []);
  return (
    <Fragment>
      <h2>Choose a movie</h2>
      <ul>
        {movies.movieList?.map((m) => {
          <li key={m.id}>{m.title}</li>;
        })}
      </ul>
    </Fragment>
  );
}

Answer 1

Try this

  const [movies, setMovies] = React.useState<any>({});

  React.useEffect(() => {
    setMovies({
      movieList: [
        { id: 1, title: "The Godfather" },
        { id: 2, title: "Apocalypse Now" },
      ],
    });
  }, []);
  return (
    <div>
      <h2>Choose a movie</h2>
      <ul>
        {movies?.movieList?.map((m) =>  
          <li key={m.id}>{m.title}</li> 
         )}
      </ul>
    </div>
  );