I have a situation where on clicking on a div element, the browser should navigate to a different page. In the onClick of this event, I change the value of the state variable and in the Link tag, I pass the values to the next component.
The code is like this-
import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
import {Switch, BrowserRouter as Router,Route,Link} from 'react-router-dom'
import {FullBlog} from './FullBlog.js'
class Author extends React.Component{
constructor(props){
super(props);
this.state={
data:this.props.data,
}
this.loadBlog=this.loadBlog.bind(this);
}
loadBlog(i){
var data=this.state.data[i];
this.setState({
data:data,
})
}
render(){
let content=(<p></p>);
//console.log(this.state.data);
var data=this.state.data;
content=(
<div>
<Link to={'/fullblog/${data}'} /><div onClick={this.loadBlog.bind(this,this.props.i)} className="box">
<div>{this.props.i}</div>
<div>{this.props.data.Author}</div>
<div>{this.props.data.Book}</div>
</div>
</div>
)
return content;
}
}
And the parent class for the same is like this
import React from 'react'
import ReactDOM from 'react-dom'
import {ExpenseApp} from './expense-app.js'
import {Switch, BrowserRouter as Router,Route,hashHistory} from 'react-router-dom'
import {FullBlog} from './FullBlog.js'
class App extends React.Component{
render(){
return(
<Router>
<div>
<Route path='/' render={()=><ExpenseApp data={data}/>}/>
<Route path='/fullblog' component={FullBlog}/>
</div>
</Router>
)
}
}
ReactDOM.render(<App/>, document.getElementById('container'))