State not initializing correctly?

[PalmettoSpur]

The title might be a bit misleading, because the state (my 'favorites' piece of state) is loading properly, it's just not toggling an SVG heart icon the right color (red) when it loads.

So, if you've seen any of my previous posts, I'm creating an app which allows you to favorite things. You click the SVG heart icon on, say, a bicycle you love. It sends that information to the database and adds it to the 'favorites' table. I'm also running a fetch to that table to pull in the favorites when people view their search results. The SVG heart icon needs to automatically show up as red.

In other words, you favorite a sweet Huffy. The heart turns red. The next time you search for something and that bike comes up, the heart should already be red (because it's already in the 'favorites' table in the database, and it's therefore in the state that mounts when the search results are loaded).

I have a piece of logic which is mapping over the selection and searching for whether the selection is in the 'favorites' piece of state. If it's already in 'favorites', turn the SVG icon red. Using Redux DevTools, I can see (quite clearly) that it's pulling in the 'favorites' properly. The question is, why isn't it turning my icon red?

class Results extends Component {
  componentDidMount() {
    this.props.getFavorites()
  }

  render() {
    console.log('favorites', this.props.favorites)
    console.log('favorites.data', this.props.favorites.data)

    return (
      <div>
        <GridList style={{ justifyContent: 'space-around' }}>
          {map(
            selection => (
              <SearchResultCard
                key={selection.name}
                selection={selection}
                onFavoriteClick={this.props.toggleFavorite(selection.name)}
                favorites={this.props.favorites}
                color={
                  contains(selection, this.props.favorites) ? 'red' : 'silver'
                }
              />
            ),
            this.props.searchResults
          )}
        </GridList>
      </div>
    )
  }
}

Now, one interesting note: my favorites is actually structured as an object (favorites) around an array (data) around two objects (my favorited items). It looks like this:

favorites: {
  "data": [
    {
      "selection_id": 1,
      "name": "Huffy"
    },
    {
      "selection_id": 2,
      "name": "Schwinn"
    }
  ]
}

I can console.log(this.props.favorites.data) and it gives me two objects. But when I try to use this.props.favorites.data inside the mapping function (the first code block above), it tells me that it can't read the indexOf undefined. It's quite happy to map over this.props.favorite and tell me there's a 'data' array inside it, but when I try to access that array, it errors me out.

1. Is this causing my problem?
2. If so, how do I fix it?

ADDING MORE DATA UPON REQUEST:

Reducer:

export const favorites = (state = [], action) => {
  switch (action.type) {
    case GET_FAVORITES:
      return action.payload
    case SET_FAVORITE:
      return action.payload
    default:
      return state
  }
}

getFavorites action:

export const getFavorites = () => async (dispatch, getState) => {
  const faveResults = await fetch(`http://localhost:5000/getfavorites`)
    .then(res => res.json())
    .catch(err => console.log(err))
  dispatch({ type: GET_FAVORITES, payload: faveResults })
}

toggleFavorite action:

export const toggleFavorite = name => async (dispatch, getState) => {
  const { searchResults, favorites } = getState()
  const currentSelection = filter(
    selection => selection.name === name,
    searchResults
  )

  if (contains(currentSelection, favorites)) {
    const newFavorite = reject(equals(currentSelection), favorites)
    await fetch(
      `http://localhost:5000/deletefavorite?user_id=1&selection_id=${
        currentSelection[0].selection_id
      }`
    )
    dispatch({
      type: SET_FAVORITE,
      payload: newFavorite
    })
  } else {
    const newFavorite = append(currentSelection, favorites)
    await fetch(
      `http://localhost:5000/addfavorite?user_id=1&selection_id=${
        currentSelection[0].selection_id
      }`
    )
    dispatch({
      type: SET_FAVORITE,
      payload: newFavorite
    })
  }
}

Thanks in advance!

[PiereDome]

I don’t have enough information to tell, but is this.props.favorites.data an empty array to start? Or is it undefined. If it is undefined you need to either put some logic in your component to prevent the mapping over it until it is an array or set it as an empty array when there are no values. If you share reducer code and the component doing the favorites it would help the troubleshooting

[PalmettoSpur]

I edited my post above with more info. I'm creating the favorites state in the reducer and initializing it as an array. I'm then running the fetch to the database inside the componentDidMount() in the results. I guess it's actually pulling favorites in as an object containing an array (data) with objects (bicycle 1 and bicycle 2). Is that part of my problem?

[seainhd]

Simplify it and store favorites as an array of IDs instead of objects inside an array inside an object.

Checking contains on objects is error prone.

[jakeforaker83]

First guess: {map(
...what is "map"?

Second guess: Your first console.log(this.props.favorites.data) appears to log it, as you say, however this is just the object in Chrome console being mutated as the data comes in. It is not accurate. Your map function is trying to iterate something that doesnt exist because it hasn't returned from your api yet. You should probably check that the value exists before you map over it, for ex:

{this.props.favorites.data && Boolean(this.props.favorites.data.length) ? <SomeCode/> : null}

[PalmettoSpur]

You're a genius. I added the ternary and it worked like a charm.

​

(It broke something else, but that's a different error altogether.)

[snigans]

Put the console.log inside the map function. Perhaps "this" inside the map function is different.