React: Nothing was returned from render even though I am returning

Question

I am creating nested components to render the data that I have.

export const MyComponent = (props) => {

  const groupMilestoneByYear = (data) => {
    // Input: Milestone Data (arr[obj])
    // Output: Milestone Data grouped by Year (bj[arr])
    // Group by Year
    let yearGroup = { '2020': [], '2021': [], '2022': [] } // make it dynamic
    data.forEach(element => {
      let currYear = element.event_date.slice(0, 4)
      yearGroup[currYear].push(element)
    });
    return yearGroup
  }

  const renderTimelineContent = (data) => {
    return (
      data.forEach(milestone => {
        let year = milestone.event_date.slice(0, 4)
        let month = milestone.event_date.slice(5, 7)
        let day = milestone.event_date.slice(8, 10)
        return (
          <Content>
            <ContentYear
              startMonth={month}
              monthType="text"
              startDay={day}
              startYear={year}
              useYear={false}
            />
            <ContentBody title={milestone.text}>
            </ContentBody>
          </Content>
        )
      })
    )
  }

  const formMilestoneTimeline = (milestones) => {
    let yearGroup = groupMilestoneByYear(milestones)
    return (
      Object.keys(yearGroup).forEach(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              {renderTimelineContent(yearGroup[year])}
            </Timeline>
          </Fragment>
        )
      })
    )
  }

  return (
    formMilestoneTimeline(milestones)
  );
}

As you can see, I am using functions that are returning multiple components in loops. But it gives me an error that says Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. I don't quite get the error because I tried to return everywhere necessary.

[`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) does not return anything. Instead, use [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). — Brian Thompson, Jul 08 '20 at 19:51
Does this answer your question? [JavaScript: Difference between .forEach() and .map()](https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map) — Brian Thompson, Jul 08 '20 at 19:54

score 1 · Accepted Answer · answered Jul 08 '20 at 19:53

  const formMilestoneTimeline = (milestones) => {
    let yearGroup = groupMilestoneByYear(milestones)
    return (
      Object.keys(yearGroup).forEach(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              {renderTimelineContent(yearGroup[year])}
            </Timeline>
          </Fragment>
        )
      })
    )
  }

The above code doesn't return anything. Per the docs the return value of the forEach method is undefined. If you want to take something and map each item to a different value (ie something that can be rendered), use map.

  const formMilestoneTimeline = (milestones) => {
    let yearGroup = groupMilestoneByYear(milestones)
    return (
      Object.keys(yearGroup).map(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              {renderTimelineContent(yearGroup[year])}
            </Timeline>
          </Fragment>
        )
      })
    )
  }

score 0 · Answer 2 · answered Jul 08 '20 at 20:08

try this, hope it work

export const MyComponent = (props) => {

  const groupMilestoneByYear = (data) => {
    // Input: Milestone Data (arr[obj])
    // Output: Milestone Data grouped by Year (bj[arr])
    // Group by Year
    let yearGroup = { '2020': [], '2021': [], '2022': [] } // make it dynamic
    data.forEach(element => {
      let currYear = element.event_date.slice(0, 4)
      yearGroup[currYear].push(element)
    });
    return yearGroup
  }

  const renderTimelineContent = (props) => {
    return (
      props.data.forEach(milestone => {
        let year = milestone.event_date.slice(0, 4)
        let month = milestone.event_date.slice(5, 7)
        let day = milestone.event_date.slice(8, 10)
        return (
          <Content>
            <ContentYear
              startMonth={month}
              monthType="text"
              startDay={day}
              startYear={year}
              useYear={false}
            />
            <ContentBody title={milestone.text}>
            </ContentBody>
          </Content>
        )
      })
    )
  }

  const formMilestoneTimeline = (props) => {
    let yearGroup = groupMilestoneByYear(props.milestones)
    return (
      Object.keys(yearGroup).forEach(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              <renderTimelineContent yearGroup={yearGroup[year]} />
            </Timeline>
          </Fragment>
        )
      })
    )
  }

  return (
    <formMilestoneTimeline milestones={milestones} />
  );
}

This will have the exact same problem since `formMilestoneTimeline` will return `undefined`. — Brian Thompson, Jul 08 '20 at 20:31

React: Nothing was returned from render even though I am returning

2 Answers2