Mapping JSON - React

Question

Can JSON be mapped via React in the format below?

I have tried mapping the data like so but the data doesn't appear:

React Code:

import data234 from "./realdata-api.json"
import { Fragment } from "react";

const [contacts, setContact] = useState(data234)

{contacts.map((contact) => (
               <Fragment>
                            <h1>{contact.stage}</h1>
                            <h1>{contact.stage}</h1>
                            </Fragment>
 ))}

JSON:

[{
    "word_tracker": {
        "words_tracked": 0,
        "words_used": 1,
        "amount_allowed": 5,
        "title_allowed": 1
    },
    "current_data": [
        {
            "stage": "TCX",
            "cycle": "switch",
            "cycle_period": "2021-07-30",
            "period_end": "2021-08-26",
            "days_into_cycle": 10,
            "days_into_route": 11
        }
    ]
}]

Is the data not mapping because of the headers? In particular, 'words_tracker' and 'current_data'??

Does anyone know how to map the data with the JSON in this format please?

Ryan Le · Accepted Answer · 2021-08-12 10:04:28Z

1

Yes, It easily can.

You will need to change it like so

<>
  {contacts.map((contact) => (
        <Fragment key={contact.current_data[0].stage}>
          <h1>{contact.current_data[0].stage}</h1>
          <h1>{contact.current_data[0].stage}</h1>
        </Fragment>
  ))}
</>

Or change to map through your current_data instead, depend on your needs and JSON structure.

answered Aug 12, 2021 at 10:04

Ryan Le

8,5181 gold badge18 silver badges27 bronze badges

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

1 Comment

Ryan Le Over a year ago

Np mate! Keep it up!

Collectives™ on Stack Overflow

Mapping JSON - React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related