How to pass JSON values into React components

In React, working with JSON data is essential for building interactive and dynamic web applications. JSON is widely used for transmitting data in web applications, especially when dealing with APIs. Passing JSON values into React components allows developers to create flexible and reusable UI components that can be dynamically populated with data.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format for storing and exchanging data. It consists of key-value pairs, is language-independent, and is supported by many programming languages.

A simple JSON object looks like this:

Here we have the keys—Name, Age, City, and Country—and their respective values—Educative, 23, Seattle, and USA. This data structured in key-value pairs, makes JSON an ideal format for data interchange between a server and a client.

Step 1: Importing JSON data into React components

There are different ways to import JSON data in your React components. You can create a JSON data file or fetch data from an API.

If you have a local JSON file named data.json, you can import it directly into your React component by using the import statement as follows:

Step 2: Passing JSON data as component props

You can use props to pass JSON data into a React component. Props allow you to pass data from the parent component to the child component. You can pass the JSON values as props when rendering the component. By passing JSON data as props, you enable components to render dynamic content based on the data provided.

Let’s look at a working example of passing JSON data via props from a parent component to a child component in React.

In the code above, we have created a file, data.json that holds the JSON data. We import it into the App component and pass it as a prop, data, to the Child component. In the Child component, we destructure the data prop, to directly access the title and body and then we render them on the screen.

Want to get hands-on practice with importing JSON data in React components via local JSON files? Try out this project, Build a Music Player Application Using React Native.

Step 3: Accessing JSON values in React components

After importing or fetching the JSON data, you can access its values like any other JavaScript object. JSON data is typically structured as nested objects or arrays. To access specific values, you can traverse the JSON structure using a dot (.) notation or array ([]) indexing.

Method 1: Accessing nested JSON data with a dot (.) notation

Dot notation is the most common way to access properties in JSON objects. It is simple and intuitive when the property names are valid JavaScript identifiers (i.e., no spaces, special characters, etc.). Dot notation can be used when the property names are known in advance and are straightforward.

For example, to access the title inside the header object of the sampleData JSON, we will use something like this:

Here is an example of how to use the dot notation to access nested values in JSON data inside a React component.

Explanation

• Line 5: A title constant is declared and assigned the value of sampleData.header.title. It accesses the title property within the header object of the imported JSON data.

• Line 6: A body constant is declared and assigned the value of sampleData.content.body. It accesses the body property within the content object of the imported JSON data.

• Line 10: An <h1> element is rendered with the value of the title constant. This displays the title extracted from the JSON data.

• Line 11: A <p> element is rendered with the value of the body constant. This displays the description extracted from the JSON data.

Method 2: Accessing JSON data with bracket ([]) notation

Bracket notation is useful when property names are dynamic or contain characters that aren’t valid in dot notation, e.g.,

Here is an example of using bracket notation to access nested values in JSON data inside a React component.

Explanation

• Line 5: A title constant is declared and assigned the value of sampleData["header"]["title"]. Again it accesses the title property within the header object of the imported JSON data but using the bracket notation.

• Line 6: A description constant is declared and assigned the value of sampleData["content"]["body"]. Again it accesses the body property within the content object of the imported JSON data but using the bracket notation.

• Lines 10–11: We display the fetched values in the browser.

Practice methods to access JSON data with this project, Get Live Weather Information Using React.

Rendering lists in React using the map() function

Rendering lists is a common task in React applications, especially when working with JSON data from APIs or if the local file includes arrays. We can traverse them using array indexing with the help of the map() function.

Here is an example of using the map() function to render lists in a React component.

Explanation

• Line 7: We use the map() function to iterate over the array and render each course’s data.

• Line 8: We use the key prop to help React identify which items have changed, added, or removed.

• Lines 9–10: We display the fetched course’s data in the browser.

Fetching JSON data from an API

If your data comes from an API, you can fetch it using the fetch() function or third-party libraries as follows:

Explanation

• Line 4: We define a local state for the component, data that will store the posts fetched from the API.

• Lines 6–11: We define a useEffect hook that will fetch the post data from the API, convert it into JSON format, and save it in the data state.

• Lines 15–21: We use the map() function to map over the fetched posts and display the post title and body on the browser.

Want to practive JSON data from an API with a real-world application? Try out this project, Build a Stock Market App Using React and Chart.js.

By passing JSON values into React components, you can make dynamic, reusable UI parts that can be filled with different data sets. You can build flexible and data-driven React applications by understanding how to import and access JSON data, pass it as props, and render dynamic content.