Question 184410 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Uncaught TypeError: Cannot read properties of undefined (reading 'data')

I was using Api Inntegration using stripe.
I am using homepage api integration
i was using map loop in the category part
The error I was getting this error
I was expecting Homepage Api Integration
I am continously getting error Uncaught TypeError: Cannot read properties of undefined (reading ‘data’)

import "./Category.scss";

import cat1 from "../../../assets/category/Hoodies.jpg";

const Category = ({ categories }) => {
  return (
    <div className='shop-by-category'>
      <div className='categories'>
        {categories.data.map((item) => (
          <div key={item.id} className='category'>
            <img src={cat1} alt='' />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Category;
Tags:

2

Answers


  1. 0

    1. The categories prop is not being passed down correctly from the parent component. Make sure that the categories prop is being passed down as expected and that it is not null or undefined.

    2. The categories prop is being fetched asynchronously and may not be available when the Category component is first rendered. Consider adding a check to see if categories is null or undefined before trying to access its data property

    import "./Category.scss";
import cat1 from "../../../assets/category/Hoodies.jpg";

const Category = ({ categories }) => {
  if (!categories) {
    return null; // or a loading spinner or error message
  }

  return (
    <div className='shop-by-category'>
      <div className='categories'>
        {categories.data.map((item) => (
          <div key={item.id} className='category'>
            <img src={cat1} alt='' />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Category;
    Login or Signup to reply.
  2. 0

    Before receiving data from the server, the categories variable is undefined, causing this error. To resolve this issue, you should check ‘categories’ in your code.

    Here is modified code:

    const Category = ({ categories }) => {
  return (
    <div className='shop-by-category'>
      <div className='categories'>
        {categories?.data.map((item) => (
          <div key={item.id} className='category'>
            <img src={cat1} alt='' />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Category;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search