How to access the data passed through "this.props.history.push(...)"

Question

Constructor code which contains the data

constructor(props){
    super(props);
    this.state = {
        Data: [
            {
                "name": 'red'
            },
            {
                "name": 'green'
            },
            {
                "name": 'red'
            },
            {   
               "name": 'brown'
            },
            {
                "name": 'yellow'
            },
            {
                "name": 'brown'
            }
        ]
    }
}

The code for my button where I map the data

{this.state.Data.map((color) => (
                        <>
                        <div className="ViewDetailsBtn"><Button onClick={this.clickMe.bind(this, color.name)} className="ViewDetailsBtnLink">View Details</Button></div></>
                        
                    ))}

onClick function Code

clickMe = (details) => {
    console.log(details);
    this.props.history.push({
        pathname: "/ViewDetails", 
        state: {detail: details}
    });
}

Here it displays the color name on my console properly and it redirects me to ViewDetails but how do I display the color name on the ViewDetails page?

ViewDetails page code

    import React from 'react'
    const App = (props) => {
    console.log(props);
    //const data = props.location.state.detail;
    return (
        <div>
            <h1>Details:-</h1>
            {/* <h1>{data}</h1> */}
        </div>
    )
   }

   export default App

Answer 1

your ViewDetails component should accept a parameter: const ViewDetails = (props) => {} then you should be able to access that data through that parameter