Unable to access data passed in through react router

Question

I'm trying to pass in data that I received from my backend to another page on my frontend. I'm using react-router-dom and withRouter to pass my data from the product.js page to the result.js page on the frontend. I keep getting this error though:

Uncaught TypeError: Cannot read properties of undefined (reading 'state')

And the code always breaks on this line of code, it doesn't go past it (this code is present in the result.js page code down below):

<div className="score">hAPPi SCORE: <br/> <span>{this.props.location.state.data.data.score}</span></div>

(product.js PAGE) Here's the code of the piece in the react page that passes the received data from the backend to another page. What this code does is basically take in a user's input (through speech), send the transcript to the backend, and the backend will shoot out feedback, scores, etc..., and that data will then come back to this product.js page. From there, I want to pass that data to the result.js page.

class Product extends Component {
   
    handleRedirect() {
        // Redirect user to the results page
        console.log(this.state.data)
        console.log(this.state.data.data.feedback)

        this.props.history.push("/results", {data: this.state.data}); // Sending backend data to frontend

    }

            

}



export default withRouter(Product);

(result.js PAGE) Here's the code of the react page that is supposed to receive the data from the first page and display it on the page:

class ResultPage extends Component {
    



render() {
    console.log(this.state.data) // trying to console log it, but it won't work
    return (
        
        <div className="Container">
            <div className="result-section">
                <div className="score">hAPPi SCORE: <br/> <span>{this.props.location.state.data.data.score}</span></div>
                <div className="scale-container">
                    <Scale scale-id="scr-scale" style="score-scale" score={this.props.location.state.data.data.score}/>

                </div>
            </div>

            <div className="analysis-section">
                <div className="analysis-container">
                    <div className="analysis-title">
                        In-Depth Analysis
                    </div>
                    <div className="keywords-container">
                        <div className="section-titles">
                            Keywords
                        </div>
                        <div>
                            <ul>
                                {this.props.location.state.data.data.keywords.map(kw =>
                                    <h3>{kw}</h3>
                                )}
                            </ul>
                        </div>
                    </div>

                    <div className="entity-container">
                        <div className="section-titles">
                            Entities
                        </div>
                        <div>
                            <ul>
                                {this.props.location.state.data.data.entities.map(en =>
                                    <h3>{en}</h3>
                                )}
                            </ul>
                        </div>
                    </div>

                    <div>
                        <h1>Result</h1>
                        <div>
                            {this.props.location.state.data.data.feedback}
                        </div>
                    </div>
                    
                    <hr></hr>
                </div>
                
            </div>
        </div> 
    
    );
}

}



export default ResultPage;

I keep getting errors whenever I use the this.props.location.state.data.(something) but when I replace that with hard-coded numbers/strings, the page works fine. I'm not sure I'm doing anything wrong in terms of passing the data from the product.js page to the result.js page, but I'm pretty sure I'm doing something wrong in accessing that data from the result.js page using this.props.location....

Some help would be greatly appreciated!

Answer 1

You haven't shown where/how the ResultPage component is rendered. It can receive the location object as a prop in a couple ways.

1. Rendered directly by a Route component on one of the rendering props.

   Example:

   • <Route path="/result" component={ResultPage} />
     

   • <Route
       path="/result"
       render={routeProps => <ResultPage {...routeProps} />}
     />
     
     

2. Decorated with the withRouter Higher Order Component.

   Example:

   import { withRouter } from 'react-router-dom';
   
   class ResultPage extends Component {
     ...
   }
   
   export default withRouter(ResultPage);
   

With the route props passed/injected, the ResultPage component should now be able to access a this.props.location.state?.data value passed in route state from the product page.