JSON maping in ReactJS

raynecoder

Dhiman_aman

Posted on January 21, 2023

JSON maping in ReactJS
  • 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",
  },
]
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Finally Done !!!

💖 💪 🙅 🚩
raynecoder
Dhiman_aman

Posted on January 21, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related