How to import JSON data into React Application 🔨👨🏻‍💻

Functional components are used In this project, the motive of this Project is to help those who want to import data from json file (in public directory) into React application to show in tabular format depending upon selected dropdown options.

There are two dropdown selectors “Name” and “Plant”, after selecting “Name”, options inside “Plant” dropdown are changed. after selecting both dropdown options, the data for that “Name” and its “Plant” is showed below in a tabular format. To see Output → GO TO BOTTOM⤵️

👨🏻‍💻 Code →

1.Create a folder inside public, name the folder as “Data” or anything you like.

2.Create a json file inside that Data folder and name it as data.json. and write your data in given format ⤵️

3. Import JSON Data from Data.json file into State.

Define State → Fetch data.json’s Data in state named data.

4. Create a dropdown selector using material ui 💅🏻

i) As you can see handlechange1 event listener is defined in <Select /> so that options inside the selector does get selected after clicking any option.

and in options, array is used named uniqueTags for mapping data inside <option/> selector.

Write below code inside return() statement ⤵️

Below code is to select options in 1st dropdown selector → define State called practice → const [practice, setPractice] = useState(“”);

Write below code outside return() statement ⤵️

To Push json data of (CustName) in “Name” dropdown to map all options in 1st dropdown called “Name”.

ii)As you can see handlechang2 event listener is defined in <Select /> so that options inside the selector does get selected after clicking any option.

and in options, options variable is introduced

Write below code inside return() statement ⤵️

• After selecting “Name” dropdown, selected option will change options inside “Plant” dropdown to select.
• Introduce 2 states for below code to work →

const [CID, setCID] = useState([]);

const [contact, setContact] = useState([]);

Write below code outside return() statement ⤵️

To store data.DBInfo and data.ContactInfo, declare arrays dbInfo and contactInfo.

5. Create a component as Table.js to create a table to show Data related to selected Dropdown options.

6.Create Table2.js to show 2nd table

7.Import Files in App.js before you Run and Build →

8. Run and Build the Project → After Build you can see you're data.json file inside public folder and you can update file data in future.

Happy Coding 👩🏻‍💻💯