I am trying to use Context api for a To-do website in vite and somehow its not working out

Question

here is my Usercontext.js

import React from "react";

const Usercontext = React.createContext();

export default Usercontext;

and here is my Usercontextprovider.jsx

import React, {  useState } from "react";
import Usercontext from "./usercontext";

const Usercontextprovider = ({children})=>{
    let [user,Setuser] = useState(null);
    <Usercontext.Provider value={{user,Setuser}}>
        {children}
    </Usercontext.Provider>
}
export default Usercontextprovider;

and here is my Addtodo.jsx

import { useEffect, useState ,useContext} from "react";
import Usercontext from "./context/usercontext";

export default function Addtodo(){
    let [options,setoptions] = useState([]);
    let id = 1;
    let {setuser} = useContext(Usercontext);
    return(
        <>
        <input type="text" placeholder="ADD TO DO" defaultValue={''} className="border rounded-l-lg w-64 h-6 text-black" id='todo'/>
        <button className="bg-orange-500 rounded-r-lg" onClick={()=>{
            let todo = document.querySelector("#todo").value;
                options.push({
                    'id':id,
                    'tick':false,
                    'edit':false,
                    'todo':{todo}
                });
                setuser({options});
                id++;
                document.querySelector('#todo').value = '';
        }}>ADD</button>
        </>
    )
}

and here is my app.jsx

import Addtodo from './Addtodo'
import Usercontextprovider from './context/usercontextprovider'
import List from './List'
function App() {
  return (
    <Usercontextprovider>
        <h1>Hello</h1>
        <Addtodo />
    </Usercontextprovider>
  )
}

export default App;

my webpage right now is empty with no element in the root , i was rather expecting it to have the Addtodo.jsx, but it rather is empty

Answer 1

As far as I see, you are not returning anything in UseContextProvider. You should add the return statement:

import React, {  useState } from "react";
import Usercontext from "./usercontext";

const Usercontextprovider = ({children})=>{
    let [user,Setuser] = useState(null);
    return <Usercontext.Provider value={{user,Setuser}}>
        {children}
    </Usercontext.Provider>
}
export default Usercontextprovider;

Hopefully this resolves the issue