Tukukkk

I'm trying to show a list of articles in my component and I'm getting "Cannot read property 'map' of undefined" error on my "articleList.js" component .what's wrong with my code ?
and also When I log articles , It's undefined.

I have below Code in my reducer :

 const initialState = {

  articles: ,

  loading: false,

  error: null

  };





export default (state=initialState, action) => {

switch (action.type) {

    case GET_ARTICLES:

      return {

         ...state,

         articles: action.payload,

         loading: false

     };

code for action :

 export const getArticles =()=> dispatch =>{

 fetch('http://localhost:8000/api/articles/')

.then(handleErrors)

.then(res => dispatch(

    {

        type : GET_ARTICLES,

        payload: res.json

    }

))}

code for component :

 componentDidMount() {

     this.props.getArticles();

 }



render() {

    const { articles } = this.props.article;



return (

  <div>

    <div>

      <div>

        {articles.map(({ id, header }) => (

          <div key={id} timeout={500} className="fade">

            <div>

              <button className="remove-btn" onClick={this.onDeleteClick.bind(this, id)} >Remove</button>

              {header}

            </div>

          </div>

        ))}

      </div>

    </div>

  </div>

);

}

}



   const mapStateToProps = state => ({

        article: state.article

    });



   export default connect(

        mapStateToProps, { getArticles} )(ArticleList);

Sorry about the large amount of code dumped, its just all related and I believe the error lies somewhere within having an undefined initialState but I cant see what I have missed defining

Seems yo confuse yourself with singular / plural variables' names. Your action sets articles as plural in reducers' state:

return {

  ...state,

  articles: action.payload,

So when you mapStateToProps:

 const mapStateToProps = state => ({

      article: state.article

  });

state.article will be undefined as reducer never sets it as singular variable. Also from the snippet you provided I see no reason to use singular term anyway.

So try changing like:

  const { articles } = this.props.articles;



  const mapStateToProps = state => ({

    articles: state.articles

  });

Well , i think you just need to check if your articles is undefined , the state update may be asynchronous, so at the first time the render method was called it was undefined , just do something like

{articles ? {articles.map(({ id, header }) => (

      <div key={id} timeout={500} className="fade">

        <div>

          <button className="remove-btn" onClick={this.onDeleteClick.bind(this, id)} >Remove</button>

          {header}

        </div>

      </div>

    ))} : null }