0

This is something that has been asked but the solutions i found on here do not work for whatever reason. I have an array in my MongoDB and I am attempting to display them on my front end client. Like so: Genre: Action, Sci-Fi

Just calling it brings them in as a single text element. I was attempting to use the .map function but gives me error everytime.

Here is the component. With my attempt at the array.

import React from "react";
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';

import { Link } from 'react-router-dom';

import './movie-view.scss';

export class MovieView extends React.Component {
  
  render() {
    const { movie, onBackClick } = this.props;
    return (
      <>
        <Row>
          <div>
            <img src={movie.imageUrl} />
          </div>
         </Row>
          <Row>
           //This is the part not working
           <div>
            <span> Genre: </span>
             {this.state.movies.map(movie => {
               return ( <div key={movie.genre}>
                 <Link to={`/movies/${movie.genre}`}>{movie.genre}</Link>
                </div>
               )
             })
            }
           </dl>
          </Row>
          <Row>
            <span className="meta-text">Directed by: <Link to={`/movies/${movie.director}`}>{movie.director}</Link></span>
          </Row>
          <Row  className="text-white">
          <h1>{movie.Title}</h1>
          <p className="movie-description">{movie.description}</p>
          <div>
            <Button className="lg" variant="primary" onClick={() => {onBackClick(null);}}>Back to list</Button>
          </div>
        </Row>
      </>
    );
  }
}

export class MainView extends React.Component {
  constructor() {
    super();
    this.state = {
      movies: [],
      selectedMovie: null,
    };
  }
}

I'm not sure if you need more context than that, if so let me know. Just to explain the first part better, just calling {movie.genre} works fine but the results are "ActionSci-Fi" with no separation. Appreciate the help!

Jonathon Roeland
  • 15
  • 3
  • There is no `movies` state defined in `MovieView`. Furthermore, to use state, you need to define your constructor and inside it, call a parent's constructor `super(props)` – Adel Tahir Jun 11 '21 at 18:00
  • It looks as though you are attempting to render the `this.state.movies` of the `MainView` component from within the `MovieView` component. Are you passing a `movies` prop to `MovieView`? Can you update your question to include full and complete component code in a [Minimal, Complete, and Reproducible Code Example](https://stackoverflow.com/help/minimal-reproducible-example)? – Drew Reese Jun 11 '21 at 21:12

0 Answers0