How to solve this Typescript type problem in React

I’m trying to implement the data type returned from the API I’m using. The total_page and total_results are marked as an error. Looks like I need to implement some type. I can’t understand how to solve this problem this type requirement. The message is:

(property) React.ProviderProps.value: MoviesContextData
The type ‘{ movies: MovieData[]; pageNumber: number; setPageNumber: Dispatch<SetStateAction>; }’ does not have the following properties of type ‘MoviesContextData’: total_pages, total_results ts(2739)
index.d.ts(327, 9): The expected type comes from the ‘value’ property, which is declared here in the type ‘IntrinsicAttributes & ProviderProps’"

import {
    useContext,
    createContext,
    useEffect,
    useState
} from "react"

import { MoviesProviderProps } from "../interfaces/props"
import { MovieData, MoviesContextData } from "../interfaces/types"

import axios from "axios"
import { POPULAR_BASE_URL } from "../services/api"

const MoviesContext = createContext<MoviesContextData>(
    {} as MoviesContextData
)

export const MoviesProvider = ({ children }: MoviesProviderProps) => {
    const [movies, setMovies] = useState<MovieData[]>([])
    const [pageNumber, setPageNumber] = useState(1)
    const [totalResults, setTotalResults] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)

    const nextPage = ({ pageNumber }: MoviesContextData) => {
       axios.get(`${POPULAR_BASE_URL}&page=${pageNumber}`)
    }

    useEffect(() => {
        axios.get(`${POPULAR_BASE_URL}&page=${pageNumber}`)
            .then(response => {
                setMovies(response.data.results)
            })
    }, [])

    return (
        <MoviesContext.Provider value={{ movies, pageNumber, setPageNumber }}>
            {children}
        </MoviesContext.Provider>
    )

}

export const useMovies = () => {
    const context = useContext(MoviesContext)

    return context
}

Types:

  export type MoviesContextData = {
    movies: MovieData[];
    pageNumber: number;
    setPageNumber: (prevState: number) => void;
    total_pages: number;
    total_results: number;
}

export type MovieData = {
    id: number;
    backdrop_path: string;
    poster_path: string;
    title: string;
    release_date: string;
    vote_average: number;
}

>Solution :

You define MoviesContextData as:

export type MoviesContextData = {
    movies: MovieData[];
    pageNumber: number;
    setPageNumber: (prevState: number) => void;
    total_pages: number;
    total_results: number;
}

And then you provide this value for that type:

<MoviesContext.Provider value={{ movies, pageNumber, setPageNumber }}>

total_pages and total_results are required properties, but are missing in the context provider’s value.

That’s what this portion of that error message is trying to tell you:

does not have the following properties of type ‘MoviesContextData’: total_pages, total_results ts(2739)

To fix it you need to provide those properties with something like:

<MoviesContext.Provider value={{
  movies,
  pageNumber,
  setPageNumber,
  total_pages: Math.ceil(totalResults / numberOfResultsPerPage),
  total_results: totalResults
}}>

Or make the properties optional:

export type MoviesContextData = {
    // other properties...
    total_pages?: number;
    total_results?: number;
}