props is not defined when using MapStateToProps

Question

When I get to my homepage, I have a current state that is an object made of objects that are my articles.

articles:
0: {id:'3',body:'ballon pied ball…football'}
1: {id:'2',body:'Encore du Lorem … article'}
2: {id:'1',body:'Lorem Ipsum Dolo… article'}

It corresponds to the list of article on the homepage; when I click on one of them, it should redirect me to the specific page of the article where I can read it. (/article/:id)

So I try to create an Article component that would render the title, subtitle and body of it. But I get 'props is undefined' as an error:

Article.js component:

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


const Article = ({match}) => (
<div className="aboutpage-wrapper">
  <div className="container">
    <h1>{match.params.id}</h1>
    {console.log(props)}
{/*    <h2>{props.article.title}</h2>
    <h3>{props.article.subtitle}</h3>
    <p>{props.article.body}</p>*/}
  </div>
</div>
);

const mapStateToProps = state => ({ article: state.articles[1] });
// I try to access articles[1] just to see if it works.

export default connect(mapStateToProps)(Article);

any idea ?

Jordan Enev · Accepted Answer · 2018-05-29T10:22:13.097

1

It's because in your Article component you destructure the props: ({ match }), therefore you won't have access to the props.

If you want to access the props directly in your Article component, then you should do this:

const Article = props => (...);

If you want continuing destructuring the props, then list all the needed props fields, as follows:

const Article = ({ match, article, ...rest }) => (...);

edited May 29 '18 at 10:22

answered May 29 '18 at 10:16

Jordan Enev

16,904
3
42
67

thank you @Jordan Enev! then how can I get the right article with the specific id ? – Uj Corb May 29 '18 at 10:28
At `mapStateToProps` as a second argument, you have to have `props`. Depending on what library you're using (I guess react-router), in the `props` there will be the `id` of the current article. Something like that: ```const mapStateToProps = (state, props) => ({ article: state.articles[props.params.id] });``` – Jordan Enev May 29 '18 at 10:30
I almost get it; however I got 'cannot read property 'id' of undefined – Uj Corb May 29 '18 at 10:36
Do you use `react-router` package? – Jordan Enev May 29 '18 at 10:37
I exactly use: `react-router-dom` – Uj Corb May 29 '18 at 10:38
Actually, I just realised my state is an Array of Object, not an object of objects: `[{id:1, title: 'title1'}, {id:2, title: 'title2'}, {id:3, title: 'title3'}]` – Uj Corb May 29 '18 at 10:40
Please checkout this [question / answers](https://stackoverflow.com/q/35352638/4312466), in order to understand how to get the URL params, using react-router. Once you get the article id, you just have to find the article by this id. You can use `.find` method. – Jordan Enev May 29 '18 at 10:42
OK I managed to get the right article using this: `const mapStateToProps = (state,props) => ({ article: state.articles.find(function (obj) { return obj.id === props.match.params.id; })}); ` however, `console.log(props.article) returns an object`but `props.article.title` is not defined, why ? – Uj Corb May 29 '18 at 10:56

props is not defined when using MapStateToProps

1 Answers1