JSX Not Appearing in Map Function

Question

I want to print the contents of an array of objects. I'm trying to render JSX from a component that gets the array as a prop, maps through an array of objects, and prints the content to the screen. The map is iterating however I'm getting no output. What am I missing? I'm getting no errors regarding either component.

export default function Games(){
 const db = [
   {
     game: "A Random Game",
     reviewer: "Random Reviewer",
     review: "This is a random review"
   },
   {
     game: "A Random Game Two",
     reviewer: "Random Reviewer Two",
     review: "This is a random review Two"
   },
 ]

  return (
    <Articles db = {db} />
  )
} 

const Articles = (props) =>{
  {props.db.map((item)=>{
    return <h1 key={item.game}>{item.game}</h1>
})}
}

Answer 1

Directly return the value of map in the Articles component:

const Articles = (props) =>{
  return props.db.map(item => <h1 key={item.game}>{item.game}</h1>);
}