how to access this json data in react return

Question

How i can able access this

{
    "user": {
        "questionsz": [
            {
                "_id": "62737b55583793fad608aaa2",
                "question": "<b>Directions(Q.1 to Q.5 ): </b><p>What approximate value should come in place of question mark (?) in the following questions?  ",
                "__v": 0
            }
        ]
        }
    }

Here Below my code

const index = (user) => {
    return (
      <div>
            question.  {user.question}
      </div>  
    )
  }

how can i access question property from above json to return actual data to show in frontend

Need to know more to answer this question. Where is the data stored? Is it coming from an API call, is it in a local file? — Ross, Jul 10 '22 at 18:18
its from API when console log inside index function JSON data shows like above — govtexam guru, Jul 10 '22 at 18:22

Chapi Menge · Accepted Answer · 2022-07-10T18:34:43.910

Your question is not very much clear but if you are accepting the JSON file as a props to your functional component you could Destructure the json data like


const index = ({ user }) => {
    return (
      <div>
            question.  {user.question}
      </div>  
    )
  }

Now the user props contains the

{
  "questionsz": [
    {
      "_id": "62737b55583793fad608aaa2",
      "question": "<b>Directions(Q.1 to Q.5 ): </b><p>What approximate value should come in place of question mark (?) in the following questions?  ",
      "__v": 0
    }
  ]
}

which you can access the questions like user.question

But my suggestion is to show the data in list format like

const index = ({ user }) => {
    return (
      <div>
            show user.question in table and question.question is html string
            <ul>
                {user.questionsz.map(question => (
                    <li key={question._id} dangerouslySetInnerHTML={{ __html:  question.question }} />
                ))}
            </ul>
      </div>  
    )
  }

i added dangerouslySetInnerHTML because i see the question is html strings. refer here for more info about rendering html string Render HTML string as real HTML in a React component

thanks its my bad i missed curly bracket const index = ({ user }) — govtexam guru, Jul 10 '22 at 18:59

score 0 · Answer 2 · answered Jul 10 '22 at 18:34

0

Use dangerouslySetInnerHTML attribute. More info here- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

answered Jul 10 '22 at 18:34

Tanvir Rahman

651
1
11
31

how to access this json data in react return

2 Answers2