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>
  )
})

Terry · Accepted Answer · 2022-02-18 12:36:37Z

5

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>
))}

edited Feb 18, 2022 at 12:36

answered Feb 18, 2022 at 12:34

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jsN00b Over a year ago

Or, if you want to avoid the explicit return then: {props.array.map((item, index) => ( <CareerItem key={index}> {item.title} </CareerItem> ))}, may be?

Sam St Aubyn Over a year ago

Ahh thank you so much, been pulling my hair out wondering why this doesn't work for about the last hour.

nacairns · Accepted Answer · 2022-02-18 12:36:02Z

1

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>
  )
})

answered Feb 18, 2022 at 12:36

nacairns

2321 gold badge3 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related