useContext (React Hook)

HomeScreen.js

import React, { useContext, useState } from "react";
import Tab from "./Tab";
import { MyContext } from "../MyContext";

const HomeScreen = () => {
  const [tab, setTab] = useState(0);
  const value = { tab, setTab };
  return (
    <MyContext.Provider value={value}>
      <Tab />
    </MyContext.Provider>
  );
};

export default HomeScreen;

MyContext.js

import React from "react";

export const MyContext = React.createContext({
  tab: 0,
  setTab: () => {},
});

Tab.js

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

const Tab = () => {
  const { tab, setTab } = useContext(MyContext);
  return (
    <ul>
      <li onClick={() => setTab(0)}>tab1 {tab === 0 ? "active" : ""}</li>
      <li onClick={() => setTab(1)}>tab2 {tab === 1 ? "active" : ""}</li>
    </ul>
  );
};

export default Tab;