I'm building a movie react app, basically Netflix, and I'm using bootstrap for most of my UI. I've managed to create a quick model of a login form that for now accepts any key and takes you to the movie list.
I've done my research but most of the question doesn't solve the issue or is unique to them.
Now here is where the problem starts: when I click on the movie card I get an error:
Objects are not valid as a React child (found: object with keys {Name, Description}). If you meant to render a collection of children, use an array instead.
Expected Output: Be able to load my movie once I click on the movie card
Question: How do I go about solving this issue?
Where I think the problem may be: In the movie-view.jsx file
movie-card.jsx
import React from 'react';
import propTypes from 'prop-types';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
export class MovieCard extends React.Component {
render() {
const {
movieData,
onMovieClick
} = this.props;
return ( <
Card >
<
Card.Img variant = 'top'
className = 'thumbnail'
src = {
movieData.ImageURL
}
/> <
Card.Body >
<
Card.Title > {
movieData.Title
} < /Card.Title> <
Card.Text > {
movieData.Description
} < /Card.Text> <
Button onClick = {
() => onMovieClick(movieData)
}
variant = 'link' >
Open <
/Button> <
/Card.Body> <
/Card>
);
}
}
MovieCard.propTypes = {
movieData: propTypes.shape({
Title: propTypes.string.isRequired,
Description: propTypes.string.isRequired,
ImageURL: propTypes.string,
}).isRequired,
onMovieClick: propTypes.func.isRequired,
};movie-view.jsx
import React from 'react';
export class MovieView extends React.Component {
keypressCallback(event) {
console.log(event.key);
}
componentDidMount() {
document.addEventListener('keypress', this.keypressCallback);
}
componentWillUnmount() {
document.removeEventListener('keypress', this.keypressCallback);
}
render() {
const { movieData, onBackClick } = this.props;
return (
<div className='movie-view'>
<div className='movie-poster'>
<img src={movieData.ImageURL} />
</div>
<div className='movie-title'>
<span className='label'>Title: </span>
<span>{movieData.Title}</span>
</div>
<div className='movie-description'>
<span className='label'> Description: </span>
<span className='value'> {movieData.Description}</span>
</div>
<div className='movie-director'>
<span className='label'>Director: </span>
<span>{movieData.Director}</span>
</div>
<div className='movie-genre'>
<span className='label'>Genre: </span>
<span className='value'>{movieData.Genre}</span>
</div>
<button
onClick={() => {
onBackClick(null);
}}
>
Back
</button>
</div>
);
}
}Console
