JSON maping in ReactJS

#javascript #react #beginners #programming

Create a JSON file with .js extension

Data.js

const JSONdata = [
  {
    id: 1,
    quote: "Life isn’t about getting and having, it’s about giving and being.",
    author: "Kevin Kruse",
  },
 {
    id: 2,
    quote: "Whatever the mind of man can conceive and believe, it can achieve.",
    author: "Napoleon Hill",
  },
]

App.js

import React from "react";
import JSONdata from "../Data";

const Home = () => {
  return (
    <>
      {JSONdata.map((dataForMap) => {
        return (
          <>
            <center>
              <h1>------------------</h1>
              <p>{dataForMap.id}</p>
              <p>{dataForMap.quote}</p>
              <h4>{dataForMap.author}</h4>
            </center>
          </>
        );
      })}
    </>
  );
};

export default Home;