Cannot get object values in react js

Question

I am passing value into the redux store through reducer. And I am displaying that value in the component.
But it says cannot read property name of undefined
Even whats weird is when I map the product, I can see product value in the console and when I don't map, I don't see the product value in the console. Please help me with this
Please find the code here
Component

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { listProductDetails } from "./actions/productActions";

const Playground = () => {
  const dispatch = useDispatch();
  const productDetails = useSelector((state) => state.productDetails);
  const { product } = productDetails;

  useEffect(() => {
    dispatch(listProductDetails("pod2"));
  }, [dispatch]);
  return (
    <div>
      <h1>
         <h1>{product[0].name}</h1>
      </h1>
    </div>
  );
};

export default Playground;

Reducer

export const productDetailsReducers = (state = { product: [] }, action) => {
  switch (action.type) {
    case PRODUCT_DETAILS_REQUEST:
      return { loading: true, ...state };
    case PRODUCT_DETAILS_SUCCESS:
      return {
        loading: false,
        product: action.payload,
      };
    case PRODUCT_DETAILS_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

Action

export const listProductDetails = (id) => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_DETAILS_REQUEST });
    const { data } = await axios.get(`/api/products/${id}`);
    console.log("this is the data");
    console.log(data);
    dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data });
  } catch (error) {
    dispatch({
      type: PRODUCT_DETAILS_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

Store

const reducer = combineReducers({
  productDetails: productDetailsReducers,
});

Shiladitya · Accepted Answer · 2021-04-13 04:40:11Z

1

It's always better to have a condition before accessing the data

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { listProductDetails } from "./actions/productActions";

const Playground = () => {
  const dispatch = useDispatch();
  const productDetails = useSelector((state) => state.productDetails);
  const { product } = productDetails;

  useEffect(() => {
    dispatch(listProductDetails("pod2"));
  }, [dispatch]);
  return (
    <div>
    {
      product &&
      product.length ?
        <h1>
           <h1>{product[0].name || ""}</h1>
        </h1>
      : null
    }
    </div>
  );
};

export default Playground;

answered Apr 13, 2021 at 4:40

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

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

2 Comments

Aman Chaudhary Over a year ago

Thanks man worked. But as the dispatch is in useEffect, it should have shown the value after fetching it isn't it?

Shiladitya Over a year ago

Yes, you are right. But there is catch, your productDetails take the default redux state into consideration.

Collectives™ on Stack Overflow

Cannot get object values in react js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related