0

I have tried the solution in the link below but still can't figure it out. I'm a newbie in react and also JS. Can anyone help me out. @@

Cannot read property 'map' of undefined

const mapStateToProps = state =>{
  return {
    data:{
      names: state.names,
      ages: state.ages,
      genders: state.genders
    },
  };
}; // This  is the copy of array in Redux state, it comes from the reducer.

const ConnectedList = ({data})=>(

  <ul>
    {data.names.map(el => (
      <li key={el.id}>{el.data.names}</li>
    ))}
    {data.ages.map(el => (
      <li key={el.id}>{el.data.ages}</li>
    ))}
    {data.genders.map(el => (
      <li key={el.id}>{el.data.genders}</li>
    ))}
  </ul>
);

const List = connect(mapStateToProps)(ConnectedList);

export default List;

Here is the reducer

const initialState = {
  data:{
    names:[],
    ages:[],
    genders:[],
  }
};

function rootReducer (state = initialState, action){
  if(action.type === ADD_DATA){
    return Object.assign({}, state, {       
      names: state.data.names.concat(action.payload),     
      ages: state.data.ages.concat(action.payload),
      genders: state.data.genders.concat(action.payload)
    });
  }
OMG
  • 3
  • 3
  • May be useful to include information about what the value of `state.names` is, have you tried debugging and making sure that it has the value that you are expecting? It sounds like (from the error) `state.names` has no value (undefined) so when you call `map` it's calling it on a essentially null value – Mark Davies Dec 05 '19 at 10:05
  • can u show the state of redux ? – Sushilzzz Dec 05 '19 at 10:15
  • @MarkDavies ty so much i'm also a newbie at JavaScript. I've been changing the code of the list but ignore what i have returned.. – OMG Dec 06 '19 at 02:10

1 Answers1

0

Okay turn out i just need to return the data but not var inside the data... 

   const mapStateToProps = state =>{
      return {
          data: state.data
      };
    };
OMG
  • 3
  • 3