React map function throws undefined error while fetching API data

Other Questions API
1

I’m working on a React app and running into an issue when trying to display data from an API call. The error happens when I try to use the map function on my data.

Here’s my component code:

import React, { Component } from "react";
import BookItem from "./BookItem";

const apiUrl = "https://api.example.com/books?query=adventure&key=abc123";

class BookList extends Component {
  constructor() {
    super();
    this.state = {
      books: []
    };
  }
  
  componentDidMount() {
    fetch(apiUrl)
      .then(response => response.json())
      .then(result => {
        this.setState({ books: result });
      })
      .catch(err => console.log("Error occurred: " + err));
  }

  render() {
    return (
      <div>
        {this.props.books.map(book => (
          <BookItem
            name={book.name}
            author={book.author}
            id={book.id}
            genre={book.genre}
          />
        ))}
      </div>
    );
  }
}

export default BookList;

I’m still learning React and can’t figure out what’s causing this problem. Any help would be great!

2

Your problem is simple - you’re fetching data into this.state.books but trying to render this.props.books (which doesn’t exist). I made this exact mistake when learning React and wasted hours debugging it. Just change your render method to use this.state.books.map() instead. But watch out for another issue: when the component first renders, your state starts with an empty array, and during the API fetch books might briefly be undefined depending on your API response. Add a conditional check like {this.state.books && this.state.books.length > 0 && this.state.books.map(...)} to avoid edge cases. This pattern’s saved me headaches in production.

3

Had the exact same issue on my first React project at work. Yeah, it’s the props vs state mixup like everyone said, but there’s another gotcha that tripped me up - your API response might not match what you think it is. I wasted hours debugging because the API returned {data: [{books: [...]}]} instead of just the array. Before switching to this.state.books.map(), console log your result in the then block. See what structure you’re actually getting. APIs love wrapping arrays in extra properties, so you might need result.items or result.data instead of just result. That’d explain why you’re still getting mapping errors even after fixing the props/state thing.

4

Been debugging React API issues for years and this one always gets people. You’ve got the props/state bug covered, but there’s a bigger problem.

Your initial state is books: [] but when the API call starts, React might set books to undefined before the response comes back. Happens all the time with slow APIs or weird response formats.

Try this pattern:

componentDidMount() {
  fetch(apiUrl)
    .then(response => response.json())
    .then(result => {
      console.log('API response:', result); // Debug this first
      this.setState({ books: result || [] }); // Fallback to empty array
    })
    .catch(err => {
      console.log("Error occurred: " + err);
      this.setState({ books: [] }); // Reset on error
    });
}

Then in render:

{this.state.books.length > 0 && this.state.books.map(book => (

The length check beats just checking if the array exists. Learned this the hard way when an API started returning null instead of empty arrays during maintenance.

Always log your API response first. You’ll be surprised what you’re actually getting back.

5

Everyone already nailed the main issue - you’re mixing up props and state. But here’s what I’d do differently.

Don’t handle all this fetch logic and undefined errors manually. Just automate the whole data pipeline. I’ve built similar book listing features for internal tools, and managing API calls directly in components gets messy fast.

Set up an automated workflow that handles API fetching, error handling, and data transformation before it hits your React app. Trigger it on schedule or webhook, process the response, and feed clean data to your frontend.

Your React component just receives properly formatted data through props (which is what you were trying to do originally). No more setState headaches, no more undefined checks, no more componentDidMount complexity.

I’ve used this pattern for everything from user dashboards to inventory systems. The frontend becomes dead simple while automation handles all the heavy lifting.

6

The bug’s in your render method. You’re using this.props.books but your data is in this.state.books. That’s why you’re getting undefined.

I’ve seen this exact mistake countless times in code reviews. When you fetch data and store it with setState, you reference state, not props.

Change this:

{this.props.books.map(book => (

To this:

{this.state.books.map(book => (

Add a safety check too since your initial state is an empty array and the API needs time to respond:

{this.state.books && this.state.books.map(book => (

This stops the component from trying to map over undefined data while the fetch is running.

7

You’re hitting a classic React mistake here. You’re trying to access this.props.books in your render method, but since you’re fetching that data in componentDidMount, it’s actually stored in state. Switch to this.state.books.map() and that undefined error should disappear. Also, throw in a quick check to make sure the books array exists before mapping over it - saves you from potential crashes.

8

lol yeah that’s a classic newbie mistake. You’re setting data in state but reading from props - completely different things. Just change this.props.books to this.state.books and you’re good. Everyone does this when they start with React.