React Array not showing data in .map despite showing in console.log

Question

I'm pulling in data from a GraphQL query and mapping through the array in my React app, I can see if I console log the array that all the data is there as requested but when I map through it, I just get nothing showing on my screen, no error, it doesn't generate any HTML elements or anything despite being similar to every other array map I've done so far.

My the mapping part of my component is as follows:

const CareerFeed = React.forwardRef((props, ref) => {

return (
    <CareerFeedWrapper ref={ref}>
      <Container width={14}>
      {console.log(props.array)}
        {props.array.map((item, index) => {
          <CareerItem key={index}>
            {item.title}
          </CareerItem>
        })}
      </Container>
    </CareerFeedWrapper>
  )
})

Answer 1

You are not returning anything from the .map function: when you use curly brackets, the arrow function no longer implicitly returns. You will need to use the return statement:

{props.array.map((item, index) => {
    return (
        <CareerItem key={index}>
            {item.title}
        </CareerItem>
    );
})}

Alternatively, ditch the curly brackets and wrap the returned JSX in parenthesis to take advantage of explicit returns:

{props.array.map((item, index) => (
    <CareerItem key={index}>
        {item.title}
    </CareerItem>
))}

Answer 2

Looks like a missing return statement on the map. This means its actually iterating through the array and replacing each one with a null object. Try this:

return (
    <CareerFeedWrapper ref={ref}>
      <Container width={14}>
      {console.log(props.array)}
        {props.array.map((item, index) => {
          return (<CareerItem key={index}> //added return
            {item.title}
          </CareerItem>) //added closing parentheses for return
        })}
      </Container>
    </CareerFeedWrapper>
  )
})