Beginning Node.js, Express & MongoDB Development/

...

/

Listing Reviews in the Movie Component

Listing Reviews in the Movie Component

Learn how to retrieve and display the movie description and its reviews.

We'll cover the following...

In this lesson, we’ll learn how to display the movie description and its reviews using the Movie component created previously.

import React from 'react'
import { Switch, Route, Link } from "react-router-dom"
import "bootstrap/dist/css/bootstrap.min.css"

import AddReview from "./components/add-review"
import MoviesList from "./components/movies-list"
import Movie from "./components/movie"
import Login from "./components/login" 

import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'



function App() {
  const [user, setUser] = React.useState(null)

  async function login(user = null){// default user to null
    setUser(user)
  }

  async function logout(){
    setUser(null)
  }

  return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Navbar.Brand>Movie Reviews</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">            
            <Nav.Link>
              <Link to={"/movies"}>Movies</Link>
            </Nav.Link>            
            <Nav.Link>
              { user ? (
                <a onClick={logout}>Logout User</a>
              ) : (
                <Link to={"/login"}>Login</Link>
              )}              
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Switch>
        <Route exact path={["/", "/movies"]} component={MoviesList}>
        </Route>
        <Route path="/movies/:id/review" render={(props)=> 
          <AddReview {...props} user={user} />
        }>
        </Route>
        <Route path="/movies/:id/" render={(props)=> 
          <Movie {...props} user={user} />
        }>
        </Route>
        <Route path="/login" render={(props)=> 
          <Login {...props} login={login} />
        }>            
        </Route>          
      </Switch>           
      
      
    </div>
  );
}

export default App;
Initial files we will build on

We’ll be listing the reviews under the movie plot, as shown in the image below:

To list the reviews, in the components/movie.js file, add the markup given below:

Press + to interact
<Container>
<Row>
  ...
  <Col>
    <Card>
      ...
    </Card>
    <h2>Reviews</h2>
    <br></br>   
    // Code for listing reviews starts here        
    {movie.reviews.map((review, index)=>{
      return (
        <Media key={index}>
          <Media.Body>
          <h5>
             {review.name+" reviewed on "} {review.date}
          </h5>             
            <p>{review.review}</p>
            {props.user && props.user.id === review.user_id && 
              <Row>                          
                <Col><Link to={{
                  pathname:"/movies/"+props.match.params.id+"/review", 
                  state: {currentReview: review}
                  }}>Edit</Link>
                </Col>
                <Col><Button variant="link">Delete</Button></Col>
              </Row>
            }
          </Media.Body>
        </Media> 
      )
    })}                         
  </Col>          
</Row>
</Container>

​​Note: We access the reviews array using the map() ...