1 component 2 conditional return. How render a collection of children ?

Question

I try to have 2 return with condition for my component but I have an error :

Objects are not valid as a React child (found: object with keys {movie}). If you meant to render a collection of children, use an array instead.

I read other subjet with almost same subject, I have tried to correcte my error with her solution without success.

The base code without the tries. The functions has concerned (that I try render) is IsFav IsNotFav.

fils.js :

import React from "react";
import "../css/MovieRow.css";
import { APIKEY, baseURL } from "../../App";

var myFavoriteMovies = [];

function IsFav(props) {
  return (
    <div key={this.props.movie.id} className="MovieRow">
      <div>
        <img alt="poster" src={this.props.posterSrc} />
      </div>
      <div>
        <h3>{this.props.movie.title}</h3>
        <p>{this.props.movie.overview}</p>
        <input type="button" onClick={this.viewMovie.bind(this)} value="View" />

        <button onClick={props.onClick} className="heart" />
      </div>
    </div>
  );
}

function IsNotFav(props) {
  return (
    <div key={this.props.movie.id} className="MovieRow">
      <div>
        <img alt="poster" src={this.props.posterSrc} />
      </div>
      <div>
        <h3>{this.props.movie.title}</h3>
        <p>{this.props.movie.overview}</p>
        <input type="button" onClick={this.viewMovie.bind(this)} value="View" />

        <button onClick={props.onClick} className="toggled heart" />
      </div>
    </div>
  );
}

class MovieRow extends React.Component {
  constructor(props) {
    super(props);
    this.addFavorite = this.addFavorite.bind(this);
    this.deleteFavorite = this.deleteFavorite.bind(this);
    this.state = { isFaved: false };
  }

  viewMovie() {
    const url = "https://www.themoviedb.org/movie/" + this.props.movie.id;
    window.location.href = url;
  }

  addFavorite() {
    this.setState({ isFaved: true });
    const favMovie = "".concat(
      baseURL,
      "movie/",
      this.props.movie.id,
      "?api_key=",
      APIKEY
    );
    myFavoriteMovies.push(favMovie);
  }

  deleteFavorite() {
    this.setState({ isFaved: false });
  }

  render() {
    const isFaved = this.state.isFaved;
    let movie;
    if (isFaved) {
      movie = <IsNotFav onClick={this.deleteFavorite} />;
    } else {
      movie = <IsFav onClick={this.addFavorite} />;
    }
    return { movie };
  }
}

export { MovieRow as default, myFavoriteMovies };

score 3 · Accepted Answer · answered Jul 16 '18 at 09:59

3

You are returning an object { movie: movie } from your MovieRow render method. Just return the JSX directly instead:

render() {
  const isFaved = this.state.isFaved;
  let movie;

  if (isFaved) {
    movie = <IsNotFav onClick={this.deleteFavorite} />;
  } else {
    movie = <IsFav onClick={this.addFavorite} />;
  }

  return movie;
}

answered Jul 16 '18 at 09:59

Tholle

108,070
19
198
189

Thank you, but when I did this my props becomes undefined. I have stick your solution for to be sure. – crg Jul 16 '18 at 10:05
1

@crg63 You should not use `this.props` in a stateless functional component. Just use the `props` that are passed in as first argument instead. – Tholle Jul 16 '18 at 10:08
Edit: I have this error for my props when I delete `this` [error](https://i.imgur.com/Sp8n9QN.png) – crg Jul 16 '18 at 10:11
@crg63 Write `props.movie.id`, not `this.props.movie.id`. – Tholle Jul 16 '18 at 10:12
You are speed :p I had edit my comment – crg Jul 16 '18 at 10:17
@crg63 You are not passing in a `movie` prop, only a `onClick` prop. ``, `` – Tholle Jul 16 '18 at 10:18
I thought the same thing but I try to pass key props in `` but I have always error `TypeError: Cannot read property 'props' of undefined` `> 9 |
`
– crg Jul 16 '18 at 10:58
@crg63 Please read what I am writing. The first argument to `IsFav` is the `props` object. `function IsFav(props) { ... }`. *Don't* write **this**, just use the `props` that are passed in as argument. And you are not giving your `IsNotFav` and `IsFav` components a `movie` prop. – Tholle Jul 16 '18 at 11:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176051/discussion-between-crg63-and-tholle). – crg Jul 16 '18 at 11:06
1

Ok thank for your help @Tholle :) I would continu in new subject if I don't find – crg Jul 16 '18 at 11:25

Abdullah · Answer 2 · 2018-07-16T10:12:09.900

1

Problem is with return { movie } you don't need to put movie inside { }

edited Jul 16 '18 at 10:12

answered Jul 16 '18 at 09:58

Abdullah

2,015
2
20
29

When I delete {} I have an error (TypeError: Cannot read property 'props' of undefined) – crg Jul 16 '18 at 10:00
1

that must in your `IsFav` and `IsNotFav` functions. See you are using `this.props.` but you just need to use `props.`. Drop the `this` part. – Abdullah Jul 16 '18 at 10:07

1 component 2 conditional return. How render a collection of children ?

2 Answers2