Detailed explanation of how to use JSON data files in React components

1Transfer JSON data directly into the component as a variable or constant

import jsonData from './';

function MyComponent() {
  return (
    <div>
      <h1>{}</h1>
      <p>{}</p>
    </div>
  );
}

This method directly introduces JSON data into the React component as a variable or constant, and can be rendered directly using properties of the JSON data, for example:.

2 Obtain JSON data from the backend via HTTP request

Use the Axios library to send HTTP requests to get JSON data

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  const [jsonData, setJsonData] = useState({});

  useEffect(() => {
    ('/api/data').then((response) => {
      setJsonData();
    });
  }, []);

  return (
    <div>
      <h1>{}</h1>
      <p>{}</p>
    </div>
  );
}

Use Fetch to send HTTP requests to get JSON data

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [jsonData, setJsonData] = useState({});

  useEffect(() => {
    fetch('./')
      .then(response => ())
      .then(data => setJsonData(data));
  }, []);

  return (
    <div>
      <h1>{}</h1>
      <p>{}</p>
    </div>
  );
}

This method is to get the JSON data of the backend by sending HTTP requests, and usually uses libraries such as Fetch or Axios to send HTTP requests. Save JSON data in the component's state, update the state when the JSON data is retrieved, and then render with the JSON data.

3 Pass JSON data as props from parent component to child component

/* Parent component */
function ParentComponent() {
  const jsonData = { title: 'Hello', content: 'World' };

  return <ChildComponent jsonData={jsonData} />;
}

/* Subcomponent */
function ChildComponent(props) {
  return (
    <div>
      <h1>{}</h1>
      <p>{}</p>
    </div>
  );
}

This approach is to pass JSON data from the parent component as props to the child component, and render directly with JSON data from props in the child component.

4Introduce a JS file containing JSON data through import

React Components

import jsonData from './';

function MyComponent() {
  return (
    <div>
      <h1>{}</h1>
      <p>{}</p>
    </div>
  );
}

document

const jsonData = {
  title: 'Hello',
  content: 'World'
};

export default jsonData;

This approach is to save JSON data in a JS file and then import it into the React component via import. Use variables or constants introduced by import directly in the component to render JSON data.

5 Save JSON data in the component's state and process it in the component

import React, { useState } from 'react';

function MyComponent() {
  const [jsonData, setJsonData] = useState({ title: '', content: '' });

  function handleJsonData() {
    // Process JSON data  }

  return (
    <div>
      <h1>{}</h1>
      <p>{}</p>
    </div>
  );
}

This method is to save the JSON data in the component's state and then process it in the component. Create a state through the useState Hook and update state using the setState function. Process the JSON data in the component and then render with the JSON data.

The above 5 methods can be used to use JSON data in React components. Different methods are suitable for different scenarios and requirements. Choose the most suitable method in the project according to actual needs.

This is the end of this article about the detailed explanation of how to use JSON data files in React components. For more related contents of using JSON data in React components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!