Movie' cannot be used as a JSX component-CodePudding

Trying to make a movie app but the type won't let me take the arguments and display them (using typescript).The problem is that I am trying to map the movie Object and display them one by one to homepage and show all the movies that I got. Also I use api from themoviedb.

This is the movie script

import React, { useEffect, useRef, useState } from "react";
import { KeyObject } from "tls";

const IMG_API="ImageApi";

interface movie{
    title: string;
    path: path.ParsedPath;
    overview: string;
    voteavg: string;
    key: KeyObject;
}

const Movie=(movie:movie)=>{
    <div className="movie">
        <img src={IMG_API movie.path} alt={movie.title} />
        <div className="info">
            <h3>{movie.title}</h3>
            <span>{movie.voteavg}</span>
        </div>
        <div className="overview">
            <h2>Overview</h2>
            <p>{movie.overview}</p>
        </div>
    </div>
}
export default Movie;

This is the home page script.

import NavigationBar from "../NavigationBar/NavigationBar";
import Movie from "../Movie";
import React, { useEffect, useRef, useState } from "react";

const FEATURED_API="baseUrl apiKey";

const HomePage= () =>{
       const movieElement=useRef(new Array());
       const [movies,setMovie]=useState([]);
        useEffect(()=>{
           fetch(FEATURED_API).then((res)=>res.json)
           .then(data=>{
               setMovie(data.arguments);
           });
       },[]);
        
        return(
            <>
                <div className="header">
                    <header>Welcome to the cinema</header>
                    <NavigationBar/>
                </div>
                <div className="movie-container">
                    {movies.map((movie)=><Movie key={movie} {...movies}/>)}
                </div>
            </>
     );
}

                            
const HomePage= () =>{
    const movieElement=useRef(new Array());
    const [movies,setMovie]=useState([]);
    useEffect(()=>{
        fetch(FEATURED_API).then((res)=>res.json)
        .then(data=>{
            setMovie(data.arguments);
        });
    },[]);
    
    return(
        <>
            <div className="header">
                <header>Welcome to the cinema</header>
                <NavigationBar/>
            </div>
            <div className="movie-container">
                {movies.map((movie)=><Movie key={movie} {...movies}/>)}
            </div>
        </>
    );
}

CodePudding user response：

In the below code, if you have used {}, then you will have to manually return the JSX as :

const Movie=(movie:movie)=>{
  return (
    <div className="movie">
        <img src={IMG_API movie.path} alt={movie.title} />
        <div className="info">
            <h3>{movie.title}</h3>
            <span>{movie.voteavg}</span>
        </div>
        <div className="overview">
            <h2>Overview</h2>
            <p>{movie.overview}</p>
        </div>
    </div>
 )
}

This is what it is complaining about, if you were not using {} then it would have returned it auto using ES6 short form of arrow functions.

CodePudding user response：

When your function body has ( ) ie. round(parenthesis) brackets, the return is implicit. ie. whatever is in the curly braces will be returned automatically

const Movie=(movie:movie)=>(
    <div className="movie">
        <img src={IMG_API movie.path} alt={movie.title} />
        <div className="info">
            <h3>{movie.title}</h3>
            <span>{movie.voteavg}</span>
        </div>
        <div className="overview">
            <h2>Overview</h2>
            <p>{movie.overview}</p>
        </div>
    </div>
)

When your function body has a { } ie. curly brackets, you have to explicit use the return keyword to return something

const Movie=(movie:movie)=>{
  return (
    <div className="movie">
        <img src={IMG_API movie.path} alt={movie.title} />
        <div className="info">
            <h3>{movie.title}</h3>
            <span>{movie.voteavg}</span>
        </div>
        <div className="overview">
            <h2>Overview</h2>
            <p>{movie.overview}</p>
        </div>
    </div>
  )
}