title: How do I access the props of an object after mapping through in React w/ Redux?
body: <p>I'm new to React and Redux, and I'm trying to make an app based on a public Animal Crossing API. I was having issues initially because after I got the data from the API and tried to map in the component, it said it was an object. I read a lot of different things on StackOverflow. I tried using Object.entries on the initial API response, that helped somewhat. I was able to make a card component for each villager. But I can't access the props in the data itself to have the names, personalities, and birthdays show up. I've been trying to do my first API call for about 3 weeks and tried several different projects and tutorials but I end up hitting a wall since I'm a beginner and still pretty confused.</p>
  <p>Can someone try looking at my code to see where I'm going wrong?</p>
  <p>This is my actions &amp; initial API call:</p>
  <pre><code>import { FETCH_CHARACTERS_REQUEST, FETCH_CHARACTERS_SUCCESS, FETCH_CHARACTERS_FAILURE } from &quot;./actiontypes&quot;;
  import axios from 'axios';
  
  export const fetchCharactersRequest = () =&gt; {
      return {
          type: FETCH_CHARACTERS_REQUEST
      }
  }
  
  const fetchCharactersSuccess = characters =&gt; {
      return {
          type: FETCH_CHARACTERS_SUCCESS,
          payload: characters
      }
  }
  
  const fetchCharactersFailure = error =&gt; {
      return {
          type: FETCH_CHARACTERS_FAILURE,
          payload: error
      }
  }
  
  export const fetchCharacters = () =&gt; {
      return (dispatch) =&gt; {
          dispatch(fetchCharactersRequest)
           axios.get('https://acnhapi.com/v1/villagers')
          .then(response =&gt; {
              const characters = Object.entries(response.data)
              dispatch(fetchCharactersSuccess(characters))
          })
          .catch(error =&gt; {
              const errorMsg = error.message
              dispatch(fetchCharactersFailure(errorMsg))
          })
      }
  }
  </code></pre>
  <p>This is my reducer &amp; initial state:</p>
  <pre><code>import {
      FETCH_CHARACTERS_REQUEST,
      FETCH_CHARACTERS_SUCCESS,
      FETCH_CHARACTERS_FAILURE
  } from './actiontypes';
  
  const initialState = {
      characters: [],
      isLoading: false,
      error: ''
  }
  
  const reducer = (state = initialState, action) =&gt; {
      switch(action.type) {
          case FETCH_CHARACTERS_REQUEST:
              return {
                  ...state,
                  isLoading: true
              }
          case FETCH_CHARACTERS_SUCCESS:
              return {
                  ...state,
                  characters: action.payload,
                  error: ''
              }
          case FETCH_CHARACTERS_FAILURE:
              return {
                  loading: false,
                  characters: [],
                  error: action.payload
              }
          default: return state
      }
  }
  
  export default reducer;
  </code></pre>
  <p>This is where I'm having a lot of issues with my mapping. I was able to successfully console.log(characterData.characters[0][1].personality) for the first villager, but I don't know how to get that right on the map.</p>
  <pre><code>import React, {useEffect} from 'react';
  import {connect} from 'react-redux';
  import {fetchCharacters} from '../features/characterActions';
  import CharacterCard from './CharacterCard';
  
  
  
  function CharacterProfile({fetchCharacters, characterData})  {
  
  
  
      useEffect(() =&gt; {
          fetchCharacters()
      }, [])
  
  
      const listVillagers = characterData.characters.map((villager) =&gt;
      &lt;CharacterCard key={villager.key} data={villager} /&gt;
      )
    
      console.log(listVillagers)
  
      return characterData.isLoading ? (
          &lt;h2&gt;Loading...&lt;/h2&gt;
      ) : characterData.error ? (
          &lt;h2&gt;{characterData.error}&lt;/h2&gt;
      ) : (
          &lt;div&gt;
              &lt;h2&gt;Animal Crossing Villagers&lt;/h2&gt;
              &lt;div&gt;
                  {listVillagers}
              &lt;/div&gt;
      
      &lt;/div&gt;
      
      )}
  
  
  const mapStateToProps = state =&gt; {
      return {
          characterData: state.character
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          fetchCharacters: () =&gt; dispatch(fetchCharacters())
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(CharacterProfile)
  </code></pre>
  <p>And this is the character card where I was attempting to get the information from the data.</p>
  <pre><code>import React from 'react'
  
  function CharacterCard({name, birthday}) {
  
      return (
          &lt;div&gt;
             &lt;h2&gt;Name: {name}&lt;/h2&gt;
            
          &lt;/div&gt;
      )
  }
  
  export default CharacterCard
  </code></pre>
  <p>Also, this is where I'm pulling the data from if it helps: <a href="https://acnhapi.com/v1/villagers" rel="nofollow noreferrer">https://acnhapi.com/v1/villagers</a></p>
  <p>I feel like these are the main places that I could have gone wrong. I really need help because it's starting to drive me insane.</p>