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
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'));
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
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