Show detailed item view using router path - reactjs

Question

My Movielist component looks a bit like:
componentDidMount() {
fetch('http://localhost:3335/movies')
.then(function(response) {
return response.json()
}).then((movies) => {
this.setState({ movies });
}).catch(function(ex) {
console.log('parsing failed', ex)
})
}
renderMovie(movie) {
return (
<Movie movie={movie} key={movie.id}></Movie>
);
}
render() {
return (
<div className="movies columns is-multiline">
{ this.state.movies.map(this.renderMovie) }
</div>
);
}
My Movie component has a <Link> :
shouldComponentUpdate() {
debugger;
if (this.props.params) {
let activeMovie = find(this.state.movies, {'id': this.props.params.id});
debugger;
this.setState({ movies: activeMovie });
}
}
render() {
return (
<Link to={`/movies/${this.props.movie.id}`}/>
...
In my index.js I've setup the following routes:
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/movies/(:id)" component={Movie}/>
</Route>
</Router>
),
document.getElementById('root')
);
I would like every time I click on The <Link>, to get the param.id and show only that Movie (with something like lodash find):
let activeMovie = find(this.state.movies, {'id': this.props.params.id});
Unfortunately this.props.params is undefined.
basically just have only one instance of the Movie component loaded in memory. (ideally without losing the previous movies so avoiding a new call everytime I go to the list view)
That's like a Todo app but with Movies instead of Todos..

Answer 1

Your route params are not passed to your Movie Component and you are trying to access it in Movie Component. The params only passed to Movielist Component.
MovieList
renderMovie(movie) {
return (
<Movie
params={this.props.params}
movie={movie}
key={movie.id}
></Movie>
);
}
You should remove the function shouldComponentUpdate in your Movie Component. Because when the url changed. The params will be passed to your MovieList Component and componentWillReceiveProps will receive the params. So you can directly update the MovieList there and you don't need to pass the params to your Movie Component.
MovieList
componentWillReceiveProps(nextProps) {
let activeMovie = find(this.state.movies, {'id': nextProps.params.id});
this.setState({ movies: activeMovie, }
}
But this will lose your movies state. So I think you need to add a nested route like below and have a separate page for Movie Details.
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/movies" component={MovieList}>
<Route path="/:id" component={Movie}>
</Route>
</Route>
</Router>
),
document.getElementById('root')
);
const {
Router,
Route,
IndexRoute,
Redirect,
Link,
IndexLink,
browserHistory
} = ReactRouter;
const {
Component,
} = React;
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
{ React.Children.toArray(this.props.children) }
</div>
)
}
}
class MovieList extends Component {
constructor(props) {
super(props);
this.state = {
movies: []
};
this.renderMovies = this.renderMovies.bind(this);
}
componentDidMount() {
this.setState({
movies: [
{ id: '1', name: 'Fantastic Beasts And Where To Find Them'},
{ id: '2', name: 'Ouija: Origin Of Evil'},
{ id: '3', name: 'Marvel\'s Doctor Strange'}]
})
}
renderMovies() {
return this.state.movies.map(movie => <li key={movie.id}><Link to={`/js/${movie.id}`}>{movie.name}</Link></li>)
}
render() {
return (
<div>
<h1>Movies</h1>
<ul>
{this.renderMovies()}
</ul>
</div>
)
}
}
class Movie extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>{this.props.params.movieId}</div>
);
}
}
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/js" component={App}>
<IndexRoute component={MovieList} />
<Route path="/js/:movieId" component={Movie} />
</Route>
</Router>
), document.getElementById('root'))
I have created a working jsbin example. Hope it helps.