React Hooks EP 6. useContext กับการส่งค่าข้าม component กันง่าย ๆ

2 min readAug 21, 2021

Blog นี้เป็นหนึ่งในชุด React Hooks กล่าวถึง useContext

ก่อนที่เราจะเริ่มนั้น Code ในตัวอย่างนี้สามารถเอาได้ที่ลิ้งด้านใต้นี้ครับ

https://github.com/Werayootk/react-hooks-useContext

การ Setting project กับ change case ต่าง ๆ ผมเขียนไว้ที่ EP1 แล้วนะครับ

case1: การใช้ useContext

โดยตัวอย่างนี้นั้นหากรัน code จะแสดงหน้าจอตามรูปด้านล่าง

โดยหากเราพิมพ์อะไรลงไปสิ่งที่พิมพ์จะแสดงออกมาด้วยเช่นหากพิมพ์ Test

ส่วนต่อไปจะเป็น code ของตัวอย่างนี้ครับ

จาก code ทั้งหมดด้านบนผมจะขออธิบายขั้นตอนถ้าหากต้องการจะเขียนเองจะเริ่มต้นอย่างไรเป็น Step by Step ครับ

Step1 : Import createContext

import React, { useState, createContext } from "react";

Step2: สร้างตัว createContext และ export

export const AppContext = createContext(null);

Step3 : ภายใต้ ContextCase1 ประกาศตัว useState ที่ต้องการส่งค่าข้าม component

const [username, setUsername] = useState("");

Step4: Wrap ตัว component ที่ต้องการส่งค่าข้ามกันพร้อมกับกำหนด value ตาม Step3

<AppContext.Provider value={{ username, setUsername }}>                      <Login />
<User />        
</AppContext.Provider>

Step5: ทั้ง component Login กับ User ให้ Import useContext กับ AppContext จาก Step2

import { AppContext } from "./ContextCase1";
import React, { useContext } from "react";

Step6: component Login เรียกใช้ useContext

const { setUsername } = useContext(AppContext);

Step7: component Login Implement setUsername จาก AppContext

setUsername(event.target.value);

Step8: component User เรียกใช้ useContext

const { username } = useContext(AppContext);

Step9: Implement username จาก AppContext

User: {username}

โดยหากจะอธิบายหลักการของ useContext นั้นจะเป็นการรวม state เป็นศูนย์กลางณ ที่หนึ่ง หาก component ใดต้องการเรียกใช้ก็สามารถเรียกผ่านตัว useContext ได้

ตอนต่อไปจะเป็น useRef ครับรอติดตามกันครับ

reactjs.org