0

I have used Chart.js bar library in my component.

return (
        <div>
            <Bar data={this.data} onElementsClick={this.onKeywordClick}   
                width={100}
                height={80} 
                onElementsClick={elems => {
                    console.log("hi"+elems[0]._model.label);
                    window.location = "/keywordNews" 
                }}
            />
        </div>
    )

When I click on the bar chart it will map into the route and open the keywordNews component. But I want to send some data using props which is elems[0]._model.label. So is this possible to return component from here or what can be the option to send data when keywordNews component open from window.location method.

imsaiful
  • 1,556
  • 4
  • 26
  • 49
  • pass it as a hash in the url: `window.location = "/keywordNews#data=" + elems[0]._model.label` – Brandon May 17 '19 at 20:59
  • then how to access in the component. Actually, I am a python developer. Using react in my project the first time. – imsaiful May 17 '19 at 21:08
  • are you using `react-router` ? – Olivier Boissé May 17 '19 at 21:18
  • Yes I am using react-router – imsaiful May 17 '19 at 21:23
  • use `withRouter` to get access to the `history` property -> https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router then change the route using `history.push('/keywordNews?label=' + elems[0]._model.label)`. Inside your target route, use `match.params.label` to get the value of the label parameter – Olivier Boissé May 17 '19 at 21:36
  • Actually, I save my elems[0]._model.label in localStorage and then access in my component with localStorage get Item method. How is this idea? – imsaiful May 17 '19 at 21:39
  • it's ok, keep in mind that if you are accessing the app using another browser or if you clear the cache, the data in the localStorage would be lost. Using the query string resolves both problems. – Olivier Boissé May 17 '19 at 21:47
  • Thanks for this. Now I got the difference. – imsaiful May 17 '19 at 21:50

0 Answers0