reactjs - cannot find property id of undefined

Question

I am working on an airbnb inspired app and i am not sure why my reviews are undefined but my home object returns properly. Right now i am unable to display all of the current reviews for each listing. They exist in my database but i am not sure why i am unable to render them. home_details.jsx

import React from 'react';
import { Link } from 'react-router';

import ReviewListItemContainer from './review_list_item_container';

const reviewList = (reviews) => (
  reviews.map(review => (
    <ReviewListItemContainer
      review={review}
      key={review.id}
    />
  ))
);

const HomeDetail = ({ home,reviews }) => {
  console.log(home)
  return (
    <div>
      <p className="details-title"> {home.description}</p> 
      <ul className="home-list">
    
        <img className="index-image" src={home.picture_url}/>
       
        <li>Mininum Nights: {home.nights}</li>
        <li>Number of Beds: {home.beds}</li>
        {home.average_rating &&
           <li>Rating: {home.average_rating}</li>
        }
      </ul>
      <br/>
       <div className="reviews"> 
        <h3>Reviews</h3>
        {reviewList(reviews)}
      </div>
    </div>
  );
};

export default HomeDetail;

review_list_container.js

import React from 'react';
import { connect } from 'react-redux';

const Review = ({ review, author }) => {
  const { rating, body } = review;
  console.log(body)
  return (
    <div className="review-container">
     <div className='user-review-container'>
        <li>{rating}</li> 
        <li>{author.username}</li>
        <li>{body}</li>
        </div>
    </div>
  );
};

const mapStateToProps = ({entities: { users }}, { review }) => {
  return {
    author: users[review.author_id]
  };
};

export default connect(mapStateToProps)(Review);

home_actions.js

import * as APIUtil from '../util/home_api_util';
export const RECEIVE_HOMES = 'RECEIVE_HOMES';
export const RECEIVE_HOME = 'RECEIVE_HOME';
export const RECEIVE_REVIEW = 'RECEIVE_REVIEW';

export const receiveHomes = homes => ({
  type: RECEIVE_HOMES,
  homes,
});

export const receiveHome = ({ home, reviews, authors }) => ({
  type: RECEIVE_HOME,
  home,
  reviews,
  authors,
});

export const fetchHomes = filters => dispatch => (
  APIUtil.fetchHomes(filters).then(homes => (
    dispatch(receiveHomes(homes))
  ))
);

export const fetchHome = id => dispatch => (
  APIUtil.fetchHome(id).then(payload => (
    dispatch(receiveHome(payload))
  ))
);

export const createHome = home => dispatch => (
  APIUtil.createHome(home).then(home => (
    dispatch(receiveHome(home))
  ))
);


export const receiveReview = ({ review, average_rating, author }) => ({
  type: RECEIVE_REVIEW,
  review,
  average_rating,
  author,
});

export const createReview = review => dispatch => (
  APIUtil.createReview(review).then(review => (
    dispatch(receiveReview(review))
  ))
);

homes_reducer.js

import {
  RECEIVE_HOMES,
  RECEIVE_HOME,
  RECEIVE_REVIEW,
} from '../actions/home_actions';

const homesReducer = (state = {}, action) => {
  Object.freeze(state)
  switch(action.type) {
    case RECEIVE_HOMES:
      return action.homes;
    case RECEIVE_HOME:
      const newHome = { [action.home.id]: action.home };
      console.log(home, "reducer")
      return Object.assign({}, state, newHome);
    case RECEIVE_REVIEW:
      const { review, average_rating } = action;
      const newState = Object.assign({}, state);
      newState[review.home_id].reviewId.push(review.id);
      newState[review.home_id].average_rating = average_rating;
      return newState;
    default:
      return state;
  }
};

export default homesReducer;

reviews_reducer.js

import {
  RECEIVE_HOME,
  RECEIVE_REVIEW,
} from '../actions/home_actions';

const reviewsReducer = (state = {}, action) => {
  Object.freeze(state);
  switch (action.type) {
    case RECEIVE_HOME:
      return Object.assign({}, state, action.reviews);
    case RECEIVE_REVIEW:
      const { review } = action;
      return Object.assign({}, state, { [review.id]: review });
    default:
      return state;
  }
}

export default reviewsReducer;

_review.json.jbuilder

json.extract! review, :id, :rating, :body, :home_id, :author_id

show.json.jbuilder

json.review do
  json.partial! '/api/reviews/review', review: @review
end

json.author do
  json.partial! '/api/users/user', user: @review.author
end

json.average_rating @review.home.average_rating

question from:https://stackoverflow.com/questions/66054302/cannot-find-property-id-of-undefined

Answer 1

try changing

reviews.map(review => (
<ReviewListItemContainer
  review={review}
  key={review.id}
/>))

into

reviews && reviews.length>0 && reviews.map(review => (
<ReviewListItemContainer
  review={review}
  key={review.id}
/>  ))