I have a question, I will appreciate if you could help me.
I was building a simple react movie app, using redux for manage the state. I also use react router dom for manage basic routes.
I have the home page, where I render some radio buttons that when clicked they dispatch an action to filter the movies by a genre.
So my question is that when I clicked in a radio button it made the filter but the radio button it not checked.
Whereas if I put the Home component outside the Route it do it well, the radio button is checked and it filter the movies list.
This is the app component, with the home outside the router working well and the home inside the routing.
<Home props={props}/>
<Switch>
<Route exact path='/home' component={() => <Home props={props}/>} />
<Route path='/genre=:genre' component={detailGenre} />
<Redirect to='/home' />
</Switch>
This is the radio button
const handleRadioButtons = (e) => {
sortMovies(e.target.value)
}
...
<label htmlFor='horror'>Horror</label>
<input onChange={handleRadioButtons} name='filmtype' value='horror' type='radio' id='horror' />
I'm sure i'm not understanding some behaviour or maybe i'm missing something. Thanks in advance. Why is this happening and how can I solve it ?
The component prop tells React Router to generate the component using React.createElement, and if you pass it an inline function it will execute that function and generate the component anew with every single render. In other words, your Home component is being unmounted and remounted with every render. Try this instead, which is the standard way of rendering a component via a route with props:
<Route exact path='/home' render={() => (<Home props={props}/>)} />