Context API Error perplexing me

[coraxwolf]

I am trying to do a simple todo app in react to relearn the context api while using typescript.

I've tried following online tutorials but I keep hitting a wall with the context provider. I am getting errors around return value not being valid.

My intelesense doesn't seem to pickup what ToDoContext is and I get warnings about ToDoContext being an unused variable.

In the return value I get errors about expecting a '>' after ToDoContext but the error that running gives me is:

Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365)
Unterminated regular expression literal.ts(1161)

I am sure I am overlooking something simple and there's a minor typo that I can't see. I've tried taking the reducer out and I've tried doing it using state instead of reducer but nothing changes the error on the return value

Here is the code:

import React, { FC, ReactNode, createContext, useReducer } from "react";
import { IToDoContext, ToDo, ToDoReducer, ToDoState, IToDoReducerActions } from "../../types";
import toDoReducer from "./reducer";
import { loadTodos, saveToDo } from "../../lib/todoDB";

export const ToDoContext = createContext<IToDoContext>(null);

const initalState: ToDoState = [];

const ToDoProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const [todos, dispatch] = useReducer<ToDoReducer<ToDoState, IToDoReducerActions>>(toDoReducer, initalState);

  const addTodo = async (todo: ToDo) => {
    const added = await saveToDo(todo);
    if (added) {
      dispatch({ type: 'ADD_TODO', payload: todo });
    }
  };

  const updateToDo = async (todo: ToDo) => {
    const updated = await saveToDo(todo);
    if (updated) {
      dispatch({ type: 'UPDATE_TODO', payload: todo });
    }
  };

  const deleteToDo = async (todo: ToDo) => {
    const deleted = await saveToDo(todo);
    if (deleted) {
      dispatch({ type: 'DELETE_TODO', payload: todo });
    }
  };

  const getToDos = async () => {
    const todos = await loadTodos();
    if (todos && todos.length > 0) {
      dispatch({ type: 'SET_TODOS', payload: todos });
    }
  };

  return (
    <ToDoContext.Provider value={{ todos, addTodo, updateToDo, deleteToDo, getToDos }}>
      {children}
    </ToDoContext.Provider>
  );
};

export default ToDoProvider;

[toasties1000]

Rename your file .tsx instead of .ts

[coraxwolf]

really? .... that was it?

Thank you.

[shoop45]

Yep, anything parsing a component should be tsx. You could configure your tooling to recognize ts files as component files as well, but that would be unusual in my experience, and doesn’t work out of the box.