select a single item from json array in reactjs

Question

I'm having following json file,

[
    {
        "id" : 7,
        "intro": "intro_7"
       
    },
    {
        "id" : 8,
        "intro": "intro_8"
    }
]

Then I'm trying to filter one of object from above json file, Thats I'm trying to this following way.

import React,{ useState, useEffect} from 'react';
import source_data from '../source/data.json';

function CardIntro(props){

    let {selectedItem} = source_data.find(item => item.id == 8);

    return(

            <div> Card Intro  </div>
            <div>{selectedItem.intro}</div>

    )
}

export default CardIntro;

I'm getting the following error, what is missing here

TypeError: Cannot read property 'intro' of undefined

I tried to use .filter also not successful

find return your object i.e {id:8,intro:"intro_8"}

Shubham Verma
– Shubham Verma

2021-01-03 10:17:54 +00:00
Commented Jan 3, 2021 at 10:17 — Shubham Verma
– Shubham Verma, Commented Jan 3, 2021 at 10:17

Chris · Accepted Answer · 2021-01-03 10:19:19Z

2

There is no selectedItem property in the objects of your array, which is what your code is trying to do with the object destructuring syntax. You probably don't want the destructuring syntax. Just do:

let selectedItem = source_data.find(item => item.id === 8);

Note that you should also change the == into ===. More about strict equality comparison, here. Also bear in mind that your code will not work if the find yields no result. You may want to put up a check against that.

edited Jan 3, 2021 at 10:19

answered Jan 3, 2021 at 10:16

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

select a single item from json array in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related