Using .map on a component causes component to return "Nothing was returned from render...." error

Question

I am getting the Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null from my react component. It was working fine, then I added a .map to duplicate the component and started getting the error. I have looked at this answer, this answer, this answer, and this answer, but didn't find my answer

const AdvisorData = ({weekListForAllAdvisorsOfState}) => {
    const data = usePreloadedQuery(query, queryReference);
    let {forecast} = data
    forecast.map((ind, index) => {
        return (
          <TableRow key={ind.referralCode}>
              <AdvisorTableCell>
                  <pw-subtitle size="small" color="black">{ind.referralCode}</pw-subtitle>
                  <div style={{ flexBasis: "100%" }} />
                  <pw-subtitle size="small" color="grey">{ind.postalCode}</pw-subtitle>
              </AdvisorTableCell>
          </TableRow>
        )
    })
}

score 2 · Accepted Answer · answered Mar 04 '21 at 21:12

Did you try in this way?

const AdvisorData = ({weekListForAllAdvisorsOfState}) => {
    const data = usePreloadedQuery(query, queryReference);
    let {forecast} = data
        return (
        forecast.map((ind, index) => {
          <TableRow key={ind.referralCode}>
              <AdvisorTableCell>
                  <pw-subtitle size="small" color="black">{ind.referralCode}</pw-subtitle>
                  <div style={{ flexBasis: "100%" }} />
                  <pw-subtitle size="small" color="grey">{ind.postalCode}</pw-subtitle>
              </AdvisorTableCell>
              {weekListForAllAdvisorsOfState}
          </TableRow>
        )
    }})

Using .map on a component causes component to return "Nothing was returned from render...." error

1 Answers1