مشكلة PersonContext is not defined في رياكت

يجب تعريف المتغير  PersonContext مرة واحدة خارج أي مكون لتتمكن من الوصول إليه من داخل أي تابع، في حالتك يكون شكل الاستخدام والتعريف كالتالي:

const PersonContext = React.createContext(); // يعرف خارج أي تابع

const Context = () => {
  ...
  return <PersonContext.Provider>...</PersonContext.Provider>
}

const SinglePerson = () => {
  const data = useContext(PersonContext)
  ...
}

بالإضافة إلى إجابة حسن يمكنك أيضًا تغيير المعمارية(archticture) التي تستخدمها في بناء الكود بمعنى أن تجعل الشفرة البرمجية أكثر تنظيمًا حتى لا تتشوش ويمكنك الوصول إلى ذلك عبر فعل التالي

1. إنشاء ملف خاص بالPersonContext حتى يتم فصل الطبقة الخاصة بالcontext عن الطبقة الخاصة بباقي التطبيق
2. عمل  export لكلٍ من الPersonContext وال PersonProvider 

حتى يصبح الشفرة البرمجية كالشكل التالي 

export const PersonContext= React.createContext()

export const PersonContextProvider = ({children})=>{
	const [people, setPeople] = useState()
	return (
		<PersonContext.Provider value={[people, setPeople]}>
          {children}
         </PersonContext.Provider>
)
}

 ومن ثم يمكنك بسهولة عندما تريد إستخدام تلك الcontext في أي مكان أن تقوم فقط بعمل import للPersonContextProvider وتضع بداخله الcomponents التي ستستخدمه, وبداخل تلك ال components  تقوم بعمل import لل  PersonContext ومن ثم وضعه بداخل الخُطاف useContext والذي سيقوم بإرجاع نسخة من الstate وال setPeople كما بالشكل التالي

import {PersonContextProfider} from './context/PersonContext'
import ChildComp from './childcomp'

const Comp = ()=>(
	<PersonContextProvider>
  		<ChildComp/>
  	</PersonContextProvider>
)

وبداخل الcomponent التي تدعى ChildComp يمكنك فعل التالي 

import {PersonContext} from './context/personcontext'


const ChildComp = ()=>{
	const [people, setPeople] = useContext(PersonContext)

}

personContext معرفة داخل المكون Context مما يعني انها scoped ويمكن قراءتها فقط من داخل المكون Context لقد قمت ببناء الهيكلة التي تريد تحقيقها يمكنك ملاحظة التغييرات في الأسفل 

import "./styles.css";
import React, { useContext, useState } from "react";

const PersonContext = React.createContext();

export default function App() {
  const [people, setPeople] = useState([{ name: "salah" }]);
  const removePeople = () => {
    console.log("removed");
  };
  return (
    <PersonContext.Provider value={{ people, setPeople, removePeople }}>
      <List></List>
    </PersonContext.Provider>
  );
}

function List() {
  const { people } = useContext(PersonContext);
  console.log("access people in list", people);
  return (
    <div >
      <h1>list of people</h1>
      <SinglePerson></SinglePerson>
    </div>
  );
}

function SinglePerson() {
  //access removePeople from SinglePerson
  const { removePeople } = useContext(PersonContext);
  return (
    <div>
      <h1>single person</h1>
      <button onClick={removePeople}>remove</button>
    </div>
  );
}