CODEWITHSUNDEEP
javascriptreactjstypescriptreact-routerreact-context
rumon
rumon

Reputation: 616

How to create React Context that passes a function with Typescript

I'm trying to pass state's setter function using React Context. However, I get a Typescript error "Type 'null' is not assignable to type '(value: number) => void'." when I try to assign a default value to it.

How can I solve it? Many thanks

context.tsx

import React from "react";
import { Movie } from "./movies.service";

export const MoviesContext = React.createContext<{
    movies: Movie[];
    selectedMovie: number;
    setSelectedMovie: (value: number) => void;
  }>({
    movies: [],
    selectedMovie: 0,
    setSelectedMovie: null, // ERROR IS SHOWN HERE
  });

App.tsx

import React, { useState, useEffect } from "react";
import './App.css';
import HomePage from './components/Pages/HomePage';
import { Movie, fetchMovies } from "./services/movies.service";
import { MoviesContext } from "./services/context";
import MoviePage from './components/Pages/MoviePage';

const Router = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Switch = require("react-router-dom").Switch;

function App() {
  useEffect(() => {
    fetchMovies()
      .then(setMovies)
      .catch(() => setMovies([]));
  }, []);

  const [movies, setMovies] = useState<Movie[]>([]);
  const [selectedMovie, setSelectedMovie] = useState(0);

  return (
    <MoviesContext.Provider value={{ movies, selectedMovie, setSelectedMovie }}>
      <div className="App">
        <div className="container typography-base">
          <Router>
            <Switch>
              <Route path="/movie/:movieid" >
              <MoviePage />
              </Route>
            </Switch>
          </Router>
        </div>
      </div>
    </MoviesContext.Provider>
  );
}
export default App;

Upvotes: 2

Views: 2860

Answers (1)

Matt Huggins
Matt Huggins

Reputation: 83299

Your type expects setSelectedMovie to be a function, but you're setting the default value to null. Try providing a default function implementation instead.

export const MoviesContext = React.createContext<{
    movies: Movie[];
    selectedMovie: number;
    setSelectedMovie: (value: number) => void;
  }>({
    movies: [],
    selectedMovie: 0,
    setSelectedMovie: () => {},
  });

Upvotes: 2

Related Questions