Why my useContext is not working in my code - reactjs

Question

I have just started learning useContext hook and I am struck in this problem.
I am not able use the hook itself when I am trying to print that in console its says undefined.
This is the App.js
import "./styles.css";
import NoteState from "./Context/Notes/NoteState";
import About from "./components/About";
export default function App() {
return (
<>
<About />
<div>ankit</div>
<NoteState>
<About />
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
</NoteState>
</>
);
}
These are the files where the hook is defined
import { createContext } from "react";
const noteContext = createContext();
export default noteContext;
Second one is
import React from "react";
import NoteContext from "./NoteContext";
const NoteState = (props) => {
const state = {
name: "Name",
surname: "Surname"
};
return (
<>
<NoteContext.Provider value={state}>
{props.childern}
</NoteContext.Provider>
</>
);
};
export default NoteState;
I am trying to use this in About.jsx
import React from "react";
import noteContext from "../Context/Notes/NoteContext";
import { useContext } from "react";
const About = () => {
const a = useContext(noteContext);
console.log(a); - >> comes undefined
return (
<>
{/* <div>this is about note me but {a.name}</div> */} this gives error
</>
);
};
export default About;
You can see the same in this codesand box link.
link

Answer 1

There seems to be a typo in your NoteState component. It should be props.children and not childern. When I made that change and ran your sandbox, it was working fine.

Answer 2

Try to wrap the all application into NoteContext:
import NoteContext from './NoteContext';
export default function App() {
return (
<>
<NoteContext.Provider value={state}>
<About />
<div>ankit</div>
<NoteState>
<About />
<div className='App'>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
</NoteState>
</NoteContext.Provider>
</>
);
}