Typescript react An argument for 'defaultValue' was not provided

I have the following code and I get this error (An argument for ‘defaultValue’ was not provided.).

I need to put in some default values but I can’t see which default values.

i also get some other errors:

1. Property ‘imdbID’ does not exist on type ‘never’. and

2. Argument of type ‘any[]’ is not assignable to parameter of type ‘SetStateAction<never[]>’.
   Type ‘any[]’ is not assignable to type ‘never[]’.
   Type ‘any’ is not assignable to type ‘never’.ts(2345)

3. Argument of type ‘any’ is not assignable to parameter of type ‘never’.ts(2345)
   (parameter) movie: any

import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';
export const MovieContext = createContext();


const MovieApp = ({ children }:any) => {
  const [favorites, setFavorites] = useState([]);
  const [movies, setMovies] = useState();
  const [search, setSearch] = useState('');
  const [selectedMovie, setSelectedMovie] = useState('');

  const fetchMovies = async (searchValue) => {
    const response = await axios(
      `https://www.omdbapi.com/?apikey=${API_KEY}&s=${searchValue}`
    );
    const data = response.data;
    setMovies(data.Search);
  };

  const removeFavoriteMovie = (movie:any) => {
    movie.isFavorite = false;
    const newFavoriteList = favorites.filter(
      (fav) => fav.imdbID !== movie.imdbID
    );
    setFavorites(newFavoriteList);
  };

  const addFavoriteMovie = (movie:any) => {
    movie.isFavorite = true;
    const newFavoriteList = [...favorites, movie];
    setFavorites(newFavoriteList);
  };

  const favoriteHandler = (movie:any, e:any) => {
    e.preventDefault();
    if (favorites.includes(movie)) {
      removeFavoriteMovie(movie);
    } else {
      addFavoriteMovie(movie);
    }
  };

  const showDetail = async (id:any) => {
    const response = await axios(
      `https://www.omdbapi.com/?apikey=${API_KEY}&i=${id}`
    );
    const data = response.data;
    setSelectedMovie(data);
  };

  useEffect(() => {
    console.log(API_KEY)
    fetchMovies(search);
  }, [search]);

  return (
    <MovieContext.Provider
      value={{
        setSearch,
        movies,
        favorites,
        favoriteHandler,
        showDetail,
        selectedMovie,
      }}
    >
      {children}
    </MovieContext.Provider>
  );
};

export default MovieApp;

>Solution :

You need to define what types of data your state should be, for example:

const [movies, setMovies] = useState<TheTypeThatIsReturn>()

// an example of using an array of objects:
const [movies, setMovies] = useState<Array<{id: string, name: string}>>([])

Also you should set a default value for the movies state, as its currently set to nothing and thats why you’re getting the ‘any[] is not assignable to never[] error.

You’ll find it way easier to debug these issues if you stop using ‘any’, as this will allow all types to pass through and then throw errors which is whole point of Typescript. You can define this at the top of the file using an Interface, or even in a seperate folder/file to store your interfaces and models:

interface IMovieModel {
  id: string;
  name: string;
}
const [movies, setMovies] = useState<Array<IMovieModel>>([])

If you follow these steps you will fix the errors, you will also need to model the API response or at least the parts of it you want to use to stop TS complaining about ID not being found.