How to display JSON file of below data in front end using Reactjs?

Assuming the JSON data is in a file named data.json in the public folder of your ReactJS application, you can fetch it in a component as follows:

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

function MyComponent() {
  const [data, setData] = useState(null);

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

  if (!data) {
    return 
Loading...
;
  }

  return (
    

      
        
          
            
            
            
            
          
        
        
          {data.map((row, index) => (
            
              
              
              
              
            
          ))}
        
      
Section
Subsection
Question
Answers
{row.Section}
{row.Subsection}
{row.Question}
{row.Answers}
    
  );
}

export default MyComponent;

 
we define a state variable data using the useState() hook to store the JSON data after it's retrieved. We use the useEffect() hook with an empty dependency array to fetch the data only once when the component mounts. We render a loading message if the data is not yet available.

Once the data is available, we use the map() method to render each row of the table using JSX. We extract the values of each column from the row object and use them to populate the table cells.

Make sure that the data.json file is served correctly by your web server and that the path in the fetch() method matches the location of the file.

You can use the fetch() method to retrieve the data from the server and then use the JSON.parse() method to convert it to a JavaScript object.