Data is not displaying in react components-CodePudding

I don't understand why my fetched data is not displaying. Data is fetched properly when i check by console.log() however nothing shows up in my JSX section. Code looks alight too. Anyone have idea what is wrong here?

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

export const ConcertLatest = () => {
const [concerts, setConcerts] = useState([]);

useEffect(() => {
const loadConcerts = async () => {
  const response = await axios.get("/data/concerts");

  const rawData = response.data;

  const filteredData = rawData.filter((concert) => {
    //let date = new Date(concert.datum);
    // let newestDate = new Date("2022-09-29");
    return concert.datum >= "2022-09-30";
  });

  setConcerts(filteredData);
};
loadConcerts();
}, []);

if (!concerts.length) {
return <p>Loading...</p>;
}
console.log(concerts); // getting full populated objects 
return (
<div>
  <h1>Newest concerts </h1>
  <div>
    <div className="card">
      <img src={concerts.image} style={{ width: 100 }} />
      <div className="card-text">
        <div>
          {concerts.map((concert) => {
            (<h1>{concert.name}</h1>), (<h2>{concert.datum}</h2>);
          })}
        </div>
      </div>
    </div>
  </div>
</div>
);
};

CodePudding user response：

Change syntax of map function, either use return keyword with curly braces or just use round braces without return keyword. Eg

    <div>
     {concerts.map((concert) => {
        return (
          <React.Fragment>
            (<h1>{concert.name}</h1>), (<h2>{concert.datum}</h2>)
          </React.Fragment>
        )
       })}
     </div>

    <div>
     {concerts.map((concert) => (
          <React.Fragment>
            (<h1>{concert.name}</h1>), (<h2>{concert.datum}</h2>)
          </React.Fragment>
     ))}
     </div>