Hi 👋,
Welcome To Infinitbility! ❤️
Today, we will learn to get specific data from JSON with example using objects, and an array of objects.
So, we are Going to learn to get specific data from 👇
Table of content
- React object example
- React array of the object example
React object example
To access any property of an object, we have to write the key of an object property.
As we know to create an object we need key and value pairs.
Let’s create sample object data and access any specific data like object.id
. or object.name
.
1import React, { useState, useEffect } from "react";2import "./styles.css";34export default function App() {5 const [sampleObject, setSampleObject] = useState({});67 useEffect(() => {8 let sampleObject = {9 id: 1,10 name: "infinitbility"11 };12 setSampleObject(sampleObject);13 }, []);1415 return (16 <div className="App">17 <h1>Hello {sampleObject.name}</h1>18 <h2>Coding feels like fuel for my life!</h2>19 </div>20 );21}
Here, we just create state and store when component mount, and in render, we access object data from the key.
Output

React array of object example
In this section, we will use a sample array and find a specific object from the array and store it in state and use it like above 👆.
1import React, { useState, useEffect } from "react";2import "./styles.css";34export default function App() {5 const [sampleObject, setSampleObject] = useState({});67 useEffect(() => {8 let sampleArray = [9 {10 id: 1,11 name: "infinitbility",12 domain: "infinitbility.com"13 },14 {15 id: 2,16 name: "aGuideHub",17 domain: "aguidehub.com"18 }19 ];20 let sampleObject = sampleArray.find(e => e.id == 2);21 setSampleObject(sampleObject);22 }, []);2324 return (25 <div className="App">26 <h1>Hello {sampleObject.name}</h1>27 <h2>Coding feels like fuel for my life!</h2>28 </div>29 );30}
Here, find id
2 in array to specific data related aGuideHub and storing in the state.

Thanks for reading…
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.