json - How to display data using a for loop in Timeline (Material-UI) - React

Question

I have a data in the form of json as given below:

[
    {
        "module_id": 2,
        "module_type": "Instructional",
        "module_name": "Introduction and Course Overview",
        "duration": 30,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    },
    {
        "module_id": 1,
        "module_type": "Instructional",
        "module_name": "Quiz",
        "duration": 20,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    }
]

Now, I have the following code in react and I want to render it on timeline: Timeline Code (Material - UI)

return(
    <Timeline align="alternate">
      <TimelineItem>
      <TimelineSeparator>
      <TimelineDot color="primary">
        <LaptopMacIcon />
      </TimelineDot>
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <Paper elevation={3} className={classes.paper}>
        <Typography variant="h6" component="h1">
          **Here, I want to display the module_name i.e Introduction and Course Overview and Quiz**
        </Typography>
      </Paper>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
)

Please help on how to do the same, I want the timeline to have the laptop icon with something like this

                                Introduction and Course Overview
                               |
                               |
                            Quiz

Thank you in advance :)

Answer 1

You have to map your json to <TimelineItem />, which you can do by writting a function as below

const getModules = () => {
    return res.map((r, i) => {
      const className = i % 2 === 0 ? "custom-even-class" : "custom-odd-class";
      return (
        <TimelineItem classes={{ alignAlternate: className }} key={r.module_id}>
          <TimelineSeparator>
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>{r.module_name}</TimelineContent>
        </TimelineItem>
      );
    });
  };

This function will return list of <TimelineItem /> and to render it you can call this function within your render function, as shown below

return (
    <Timeline align="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot>
            <LaptopMacIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent></TimelineContent>
      </TimelineItem>

      {getModules()}
    </Timeline>
  );

After this you will see timeline like this

Now as you mentioned you want your timeline to look like this, with starting Item as laptop icon, we have to use alternate timeline, and by default implementation all even item will be displayed in left and odd items will be displayed in right of the timeline, as you can see from above image.

                            Introduction and Course Overview
                           |
                           |
                        Quiz

So to modify it as per your question, I implemented a hacky way to modify the default CSS and made it look like as below

you can check the final code here https://codesandbox.io/s/recursing-fire-nbpmu?file=/src/styles.css