How to get value based on key from an array of objects in React

Question

I have a state

    const [analysisData, setAnalysisData] = useState(false);

I am setting the data of this state in a function and when I console console.log(analysisData) I am getting the output as

 {ID:1, ANALYSIS_NAME : "name1",
       custodians:"[{\"ID\": 1, \"NAME\": \"abc\"}, 
                    {\"ID\": 2, \"NAME\": \"xyz\"}, 
                    {\"ID\": 3, \"NAME\": \"pqr\"}]"
    
    };

When I try to display in HTML as below, I am getting error

    const AnalysisList = () => {
    return(<div>
    <Panel>
    {JSON.parse(analysisData.custodians).map((childData) => {
        return (
            <div>
                {console.log(childData.NAME)}
            </div>
        )}
    )}
    

    <Panel>
    </div>)
    }

    export default AnalysisList

I am trying to display "Name" inside the div in the above code.

How to display. Please help

what is the error you are seeing ? Also your AnalysisList does not have the analysisData anywhere in its scope . Can you add the complete code of your AnalysisList component ? . You are setting the analysisData as false initially but you are getting an object in the console log . There are many missing pieces in your question . Instead of console.log inside your div you just need to do <div{childData.NAME}</div> — Shyam
– Shyam, Commented Jul 1, 2021 at 9:46
@Shyam I tried <div{childData.NAME}</div>, but I am getting the error as undefined variable — Sai sri
– Sai sri, Commented Jul 1, 2021 at 9:53

Viet · Accepted Answer · 2021-07-01 09:57:45Z

1

Because the initial value of analysisData is false. So JSON.parse(analysisData.custodians) is return undefined and map will doesn't work.

You can you optional chaining to check in return:

{JSON.parse(analysisData.custodians)?.map((childData) => {
    return (
        <div>
            {console.log(childData.NAME)}
        </div>
    )}
)}

answered Jul 1, 2021 at 9:57

Viet

12.9k2 gold badges18 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

How to get value based on key from an array of objects in React

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