Using React with Arrays and the Map function

App.js

import React from 'react';
import posts from "./sampleContent.json";
import Content from './Content';

function App() {
  return (
    <div className="App">
      <Content posts={posts} />
    </div>
  );
}

export default App;

Content.js

import React, {Fragment} from 'react';

function Content(props) {
  const content = props.posts.map((post) =>
		<div key={post.id}>
			<h3>{post.title}</h3>
			<p>{post.content}</p>
		</div>
	);
  return (
    <Fragment>
			{content}
		</Fragment>
  );
}

export default Content;

sampleContent.json

[
  {
    "id": "1", 
    "title": "Hello World", 
    "content": "Welcome to learning React!"
  },
  {
    "id": "2", 
    "title": "Installation", 
    "content": "You can install React from npm."
  }
]