React Typescript, Type '' is not assignable to type 'null'

Question

I have the start of s simple todo app in with React and typescript

I am creating a context but getting an error in the value of the content provider

<TodoContext.Provider value={contextValue}>{children}</TodoContext.Provider>

for the value I get the error

Type '{ todoList: string[]; }' is not assignable to type 'null'.

What does error mean and how can i fix this typescript error

import { createContext, useContext, useState, ReactChildren, ReactChild } from "react";

interface AuxProps {
    children: ReactChild | ReactChildren;
  }

const TodoContext = createContext(null)

const intialTodo = ['Learn Context']

const TodoProvider = ({children}:AuxProps) => {

    const [todoList, setTodoList] = useState<string[]>(intialTodo)

    const contextValue = {
        todoList
    }

    return(
        <TodoContext.Provider value={contextValue}>{children}</TodoContext.Provider>
    )
}

export const useTodoContext = () => useContext(TodoContext)

export default TodoProvider

Foxsnow · Accepted Answer · 2022-08-22 17:15:35Z

8

Because you are sending just null. but context needs null with type here like that

const TodoContext = createContext(null as any)
render{
 const photosObject = this.context as any
}

edited Aug 22, 2022 at 17:15

answered Aug 22, 2022 at 16:29

Foxsnow

1191 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ozan Mudul · Accepted Answer · 2022-02-17 21:12:42Z

4

Why are you assigning null to string array?

const TodoContext = createContext([])

does it work for your case?

answered Feb 17, 2022 at 21:12

Ozan Mudul

1,0402 gold badges12 silver badges25 bronze badges

2 Comments

lomine Over a year ago

I need to assign something so I was trying null, with the empty array I get

Type '{ todoList: string[]; }' is missing the following properties from type 'never[]': length, pop, push, concat, and 29 more.

Ozan Mudul Over a year ago

my apologies, I never worked with react context and took a few minutes to learn and prepared this forked sandbox codesandbox.io/s/react-context-typescript-forked-sn2hmi? please let me know if it doesn't help, then we can try it again

Collectives™ on Stack Overflow

React Typescript, Type '' is not assignable to type 'null'

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related