React: How to navigate between components in React?

#1

In my App.js I have this code:

     <div className="movies-row">
        {movies.map(movie => (
          <Movies
      
            key={movie.id}
            title={movie.title}
            popularity={movie.popularity}
            release_date={movie.release_date}
            image={movie.poster_path}
          />
        ))}
       </div>

that passes information from the API to a Movies.js component in my Movies.js component I have the movies set up like this

import React from 'react'
import {useHistory} from 'react-router-dom';
export default function Movies({title, popularity, release_date, image}) {

    

    return (
        <div className="movies-items">
            <h1 className="title">{title}</h1>
            <img className="image" src={"https://image.tmdb.org/t/p/w500/"+image} alt = ""></img>
            <strong><p className="popularity">Popularity</p></strong>
            <p>{popularity}</p>
            <strong><p className="date">Release Date</p></strong>
            <p>{release_date}</p>
            <button type={button} onClick={infoButton}>Information</button>
            

            
        </div>
    )
}

What I want to be able to do is click the Infomation button at the bottom and have that Navigate to another component called MovieInfo.js. Is React Router what is needed to be able to do this? I imported {useHistory} from 'react-router-dom' but I’m not exactly sure how to use it

#2

There are many great tutorials on how to use React Router.

You do not have use React Router. You could use conditional rendering (something you learned about in the curriculum) to accomplish this.

#3 
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
function A(){
  return (<div>a</div>)  
}

function B(){
    return (<div>b</div>)  
  }


  class App extends Component{

state={
  array:[<A/>,<B/>]  ,
  count:0
}

 add=()=>{

this.setState((pre)=>{
if(pre.count===1){
return {
    ...this,count:0
}

}
else{

return{

   ...this,count:pre.count+1 
}

}


})



 } 

render(){
    return(<div>
        <button onClick={this.add}>switch Component</button>
        <h1>{this.state.array[ this.state.count]}</h1>
    </div>)
}

}


ReactDOM.render( <App/> , document.getElementById('root'));
#4
#5

So I went ahead and did this

import React, {useEffect, useState} from 'react';
import './App.css';
import Movies from './Movies.js'
import MovieInfo from './MovieInfo.js';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
.
. 
.

    <Router>
      <Switch>
        <Route path="/info" component={MovieInfo}></Route>
      </Switch>
      
    </Router>

When I go on localhost3000/info it displays a Hello World message along with all the list of movies from the Movies.js component. So where do I go from here. What I want it to be able to do is when I click on Information button on the Movies.js component I want it to display information based of whatever specific movie I clicked

#6

@fkhan698 Look at the thread @Eldhose posted earlier. It contains a good example of how to accomplish what you are wanting to do (without resorting to React Router).

#7

No need of creating multiple components for this purpose. If you want you can.

state={ movielist:[q,b,c], selectedMov:null, should ShowAllMovielist:true}

methedForselextingSelectedMovie=(index)=>{
const { movieList}={....this.state}

let selectedMovieIndex=movieList.find((i)=>i===index)
const selected=movieList [selecteMovieIndex]
this setState({...this.state, selectedMov: selected Movie})

}
rendered (){
return (<div>{this.state.movieList.map((element,i)=>{
return (<div> <button onclick={(element)=>this.showSelectedMovie(element) }>{element}</button></div)

.})}
{this state.selectedMovie}

}

I typed this code in my mobile as i am traveling. You get error definitely which let me know

#8