Props not rendered when navigating to component directly - React Redux

Question

I have a problem with a react child component, using redux and react-router.

I'm getting a value from the URL through this.props.match.params to make an API call on componentDidMount. I'm using this.props.match.params as I want to use data from the API in my content if someone navigates to this particular URL directly.

When I navigate to the the component by clicking a the component renders fine. The API is called via an action and the reducer dispatches the data to the relevant prop.

When I navigate to the component directly by hitting the URL, the API is called (I can see it called in the Network section of devtools), but the data isn't dispatched to the relevant prop and I don't see the content I expect. I was hoping that by using this.props.match.params to pass a value to the API call I could hit the component directly and get the data from the API response rendered how I want.

Below is my component code. I suspect something is wrong with my if statement... however it works when I navigate to the component by clicking a Link within my React App.

What Am I missing?

    import React from 'react';
    import { connect } from 'react-redux';
    import { fetchData } from '../../actions';


    class Component extends React.Component {

        componentDidMount() {
            this.props.fetchData(this.props.match.params.id);
        }

        renderContent() {
            if(!this.props.content) {
                return ( 
                    <article>
                        <p>Content loading</p>
                    </article>
                )
            } else {
                return (
                    <article>
                        <h2>{this.props.content.title}</h2>
                        <p>{this.props.content.body}</p>
                    </article>

                )
            }
        }

        render() {
            return (
                <>
                    <div className='centered'>
                        {this.renderContent()}
                    </div>
                </>
                )
        }
    }

    const mapStateToProps = (state) => {
        return { post: state.content };
    }
    export default connect(mapStateToProps, { fetchData: fetchData })(Component);

Answer 1

Try updating renderContent to this:

        renderContent = () => {
            if(!this.props.content) {
                return ( 
                    <article>
                        <p>Content loading</p>
                    </article>
                )
            } else {
                return (
                    <article>
                        <h2>{this.props.content.title}</h2>
                        <p>{this.props.content.body}</p>
                    </article>

                )
            }
        }

It looks like you forgot to bind this to renderContent

Answer 2

I fixed the problem, huge thanks for your help!

It turned out the API request was returning an array, and my action was dispatching this array to props.content. This particular API call will always return an array with just one value (according to the documentation it's designed to return a single entry... but for some reason returns it in an array!). I was expecting an object so I was treating it as such. I converted the array into an object in my reducer and now it's behaving as it should.

So overall turned out to be a problem with my data structure.