Kontekst - useContext

import { renderToStaticMarkup } from "react-dom/server";

function Tugma({ mavzu }) {
    return <button className={mavzu}>Bosish</button>;
}

function Panel({ mavzu }) {
    return <div><Tugma mavzu={mavzu} /></div>;
}

function Yon({ mavzu }) {
    return <aside><Panel mavzu={mavzu} /></aside>;
}

function Ilova() {
    const mavzu = "qorongi";
    return <Yon mavzu={mavzu} />;
}

console.log(renderToStaticMarkup(<Ilova />));

import { createContext, useContext } from "react";
import { renderToStaticMarkup } from "react-dom/server";

const MavzuKonteksti = createContext("yorug");

function Tugma() {
    const mavzu = useContext(MavzuKonteksti);
    return <button className={mavzu}>Bosish</button>;
}

function Panel() {
    return <div><Tugma /></div>;
}

function Yon() {
    return <aside><Panel /></aside>;
}

function Ilova() {
    return (
        <MavzuKonteksti value="qorongi">
            <Yon />
        </MavzuKonteksti>
    );
}

console.log(renderToStaticMarkup(<Ilova />));
console.log(renderToStaticMarkup(<Tugma />));

import { createContext, useContext, useState } from "react";
import { chiz, bos, matn } from "./dom-muhit.mjs";

const MavzuKonteksti = createContext(null);

function Almashtirgich() {
    const { mavzu, almashtir } = useContext(MavzuKonteksti);
    return (
        <button onClick={almashtir}>
            Hozir: {mavzu}
        </button>
    );
}

function Korinish() {
    const { mavzu } = useContext(MavzuKonteksti);
    return <p id="korinish">Ko'rinish: {mavzu}</p>;
}

function Ilova() {
    const [mavzu, ozgartir] = useState("yorug");

    const qiymat = {
        mavzu,
        almashtir: () =>
            ozgartir((o) => (o === "yorug" ? "qorongi" : "yorug")),
    };

    return (
        <MavzuKonteksti value={qiymat}>
            <Almashtirgich />
            <Korinish />
        </MavzuKonteksti>
    );
}

await chiz(<Ilova />);
console.log(matn("button"), "|", matn("#korinish"));

await bos("button");
console.log(matn("button"), "|", matn("#korinish"));

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

const MavzuKonteksti = createContext(null);

export function MavzuTaminlovchi({ children, boshlangich = "yorug" }) {
    const [mavzu, ozgartir] = useState(boshlangich);

    const qiymat = {
        mavzu,
        almashtir: () =>
            ozgartir((o) => (o === "yorug" ? "qorongi" : "yorug")),
    };

    return <MavzuKonteksti value={qiymat}>{children}</MavzuKonteksti>;
}

export function useMavzu() {
    const qiymat = useContext(MavzuKonteksti);
    if (qiymat === null) {
        throw new Error("useMavzu faqat MavzuTaminlovchi ichida ishlaydi");
    }
    return qiymat;
}

import { MavzuTaminlovchi, useMavzu } from "./mavzu-konteksti.mjs";
import { chiz, bos, matn } from "./dom-muhit.mjs";

function Tugma() {
    const { mavzu, almashtir } = useMavzu();
    return <button onClick={almashtir}>{mavzu}</button>;
}

function Xato() {
    try {
        useMavzu();
        return <p id="xato">ishladi</p>;
    } catch (x) {
        return <p id="xato">{x.message}</p>;
    }
}

await chiz(
    <MavzuTaminlovchi boshlangich="qorongi">
        <Tugma />
    </MavzuTaminlovchi>,
);
console.log(matn("button"));

await bos("button");
console.log(matn("button"));

await chiz(<Xato />);
console.log(matn("#xato"));

import { createContext, useContext, useState } from "react";
import { chiz, bos } from "./dom-muhit.mjs";

const Kontekst = createContext(null);

const izlar = [];

function Oquvchi() {
    const qiymat = useContext(Kontekst);
    izlar.push(`Oquvchi chizildi: ${qiymat}`);
    return <p>{qiymat}</p>;
}

function Begona() {
    izlar.push("Begona chizildi");
    return <span>begona</span>;
}

function Ilova() {
    const [son, ozgartir] = useState(1);

    return (
        <Kontekst value={son}>
            <button onClick={() => ozgartir(son + 1)}>Oshirish</button>
            <Oquvchi />
            <Begona />
        </Kontekst>
    );
}

await chiz(<Ilova />);
izlar.push("--- bosildi ---");
await bos("button");

console.log(izlar.join("\n"));