【React】配列をmapでイテレートしても画面に表示されない

Question

APIをfetchしてそこから帰ってくる配列をmapメソッドでイテレートし、画面に表示すると言う簡単なことをしようとしているのですが、なぜかmapメソッドを使っているところの内容が表示されません。

ソースコード

type P = {
  year: number;
  value: number;
};

const App: React.FC = () => {
  const [populations, setPopulations] = useState<P[]>([]);

  useEffect(() => {
    fetch(
      'url',
      {
        method: 'GET',
      }
    )
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setPopulations(data.result.data[0].data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="App">
      <h1>api sample</h1>
      <div>
        {console.log(populations)}
        {populations.map((population, index) => {
          <div key={index}>
            <p>{population.year}</p>
            <p>{population.value}</p>
          </div>;
        })}
      </div>
    </div>
  );
};

export default App;

stateに持たせている配列が空なのかと思い、mapの直前の部分でconsoleに出力してみたところ、ちゃんとオブジェクトが集まった配列が出力されました。また、mapメソッドないでconsole.log(population)をしてもちゃんとconsoleに出力されます。

あとは{population.year}などで出力するだけなのかと思っていたのすが、うまくいかなかったので質問させていただきました。

Answer 1

        {populations.map((population, index) => {
          <div key={index}>
            <p>{population.year}</p>
            <p>{population.value}</p>
          </div>;
        })}

mapの引数となる関数が値を返していないので、何も出力されません。=>のあとのカッコを丸括弧にしましょう。