• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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>
  )
})
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
))}
almost 3 years ago · Juan Pablo Isaza Report

0

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>
  )
})
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error