For some reason, I just can't get JSON strings to display in my component. I've tried various solutions, but no luck.

Below is my component where I map over my items:

UnitEventsItems.js

const GetEventsItems = (props) => {
  const { parsed = {} } = props;

  const getEventsItems = Object.entries(parsed).map((item, i) => ({
    item_Id: i,
    label: item[0],
    info: item[1]
  }));

  return (
    <div style={{
      marginBottom: theme.spacing(4)
    }}
    >
      {getEventsItems.map((eventsItems) => (
        ...
          <Typography>
            {`${eventsItems.info}`}
          </Typography>
        </Box>

Below is the component where I import getEventItems for display:

EventsBlock.js

import GetEventsItems from './UnitEventsItems';

...

const EventsBlock = (props) => {
  const classes = useStyles(props);
  const {
    eventsData,
    type
  } = props;

  return (
    <>
      {
       ...
              <Paper className={clsx(classes.paper, classes.scrollBar)}>
                <List component="nav" aria-label={`${type} Events`}>
                  {eventsData.map((item, i) => (
                    <ListItem key={`${i   1}${item.type}_${item.trixid}`}>
                      <GetEventsItems
                        parsed={item.comment}
                      />
                    </ListItem>

                  ))}
                </List>
              </Paper>

And then this is the parent where I import EventBlock.js and pass the props:

index.js

import React from 'react';
import EventsBlock from './EventsBlock';

const UnitEvents = (props) => {
  const { eventsData } = props;

  const refueling = (eventsData?.Refueling ?? []).map((event) => (event?.comment ? JSON.parse(event.comment) : {}));
  const periodic = (eventsData?.Periodic ?? []).map((event) => (event?.comment ? JSON.parse(event.comment) : {}));
  const corrective = (eventsData?.Corrective ?? []).map((event) => (event?.comment ? JSON.parse(event.comment) : {}));

  console.log('periodic:', periodic);
  console.log('refueling:', refueling);
  console.log('corrective:', corrective);

  return (
    <>
      <EventsBlock type="Periodic" eventsData={periodic} />
      <EventsBlock type="Refueling" eventsData={refueling} />
      <EventsBlock type="Corrective" eventsData={corrective} />
    </>
  );
};
export default UnitEvents;

Below is an image of what data looks like coming through from the API:

Below is what I have logged in the console as shown in the code above:

CodePudding user response：

This is live example of code Sandbox

What is wrong on your code

In the EventsBlock component you need to have a check Object.keys(eventsData).length after that Draw eventsData.map

Inside of eventsData.map you need also some check before draw GetEventsItems , something like

 { item.comment && (
        <li>
         <GetEventsItems parsed={item.comment } />
       </li>               
    )

Check this example , I have wrote your logic with other json data , try to use that aproach with your json data. code

CodePudding user response：

Problem solved by making the following the change.

Changed this:

    <GetEventsItems parsed={item.comment} />

to this:

    <GetEventsItems parsed={item}/>