How to display JSON key-value pairs in ReactJS

When working with data from APIs or local variablesA local variable is a variable that is only accessible within a specific part of a program in ReactJS, it is common to display JSON key-value pairs. With its component-based architecture and state management, React makes it easy and quick to render JSON data. We'll look at how to display JSON key-value pairs in a ReactJS app.

JSON Data Format
JSON Data Format

Loading and parsing JSON data

Let's say we have a JSON object with information about a user, such as their name, age, city, country, and email address. 

{
  "Name": "John Doe",
  "Age": 21,
  "City": "Lahore",
  "Country": "Pakistan",
  "Email": "Johndoe@gmail.com"
}
JSON Data

We want to use a React component to show this data. For this, we have to follow these steps.

  1. Create a React component

  2. Use that component in App.js

  3. Render the application

Creating a component

Start by creating a new file called JsonDisplay.js in your React project's components folder. In this file, define a functional component called JsonDisplay:

import React from 'react';
const JsonDisplay = ({ data }) => {
  return (
    <div>
      {Object.entries(data).map(([key, value]) => (
        <div key={key}>
          <strong>{key}:</strong> {value}
        </div>
      ))}
    </div>
  );
};
export default JsonDisplay;

Explanation

  • Line 3: This line defines a functional component called JsonDisplay. It uses ES6 arrow function syntax. The component receives a prop called data, which will be the JSON object we want to display.

  • Line 7: Object.entries(data) converts the data JSON object into an array of key-value pairs.

  • Lines 8–11: Array.map() is used to iterate over each key-value pair in the array and return a new array of JSX elements.

  • Line 10: The key prop is set to the key value of the current key-value pair. This is required for React to update and manage the rendered elements efficiently.

  • Line 12: The value of the key-value pair is displayed as the text next to the label.

Integrating the component in App.js

In the parent component, import the JsonDisplay component and use it to display the JSON data.

import React from 'react';
import JsonDisplay from './JsonDisplay';
import jsonData from './Json_data.json';
const App = () => {
  return (
    <div>
      <h1>JSON Display</h1>
      <JsonDisplay data={jsonData} />
    </div>
  );
};
export default App;

Explanation

  • Line 8: <JsonDisplay> component is rendered with the data prop set to the imported jsonData object. This passes the JSON data to the JsonDisplay component for rendering.

Rendering the application

Finally, render the App component in your main index.js file or any other root file of your React application.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Explanation

  • Line 5: This line renders the React application by mounting the App component onto the DOM. ReactDOM.render() is a method used to render React components to the DOM. It takes two arguments: the component to render and the target DOM element where the component will be rendered.

Output

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved