Map Dispatch to Props

const [isCopySuccess, setIsCopySuccess] = useState<boolean>(false)
const copyTextRef = useRef(null)

   const copyToClipBoard = async () => {
  {  try {
       await navigator.clipboard.writeText(copyTextRef.current.innerHTML)
      setIsCopySuccess(true)
       setTimeout(function() {
         setIsCopySuccess(false)
       }, 2500)
     } catch (err) {
       setIsCopySuccess(false)
     }
  }

react-native start --reset-cache

import { useCallback, useRef } from 'react';
export default function useDebounce(callback, delay = 400) {
  const debounce = useRef(null);
  return useCallback(
    (...args) => {
      const context = this;
      clearTimeout(debounce.current);
      debounce.current = setTimeout(() => {
        callback.apply(context, args);
      }, delay);
    },
    [callback, delay],
  );
}

/* 
Usage:

const handleWindowResize = useDebounce(SetWindow)

useEffect(() => {
window.addEventListener('resize', handleResize)
*/

function addList(list) {
  setLists([...lists, list]);
}
function removeList(id) {
  const tempLists = lists.slice();
  const index = tempLists.findIndex(list=> list.id === id);
  tempLists.splice(index, 1);
  setLists(tempLists);
}

    const logout = useCallback(() =>{
        dispatch({type: 'LOGOUT'});
        setUser(null);
        window.location.reload();               //the old version is history.push('/'), this cause a error when user log in, refresh the page, log out, then SIGN IN button doesn't work, I have no idea why it happens 
    },[dispatch]) 
    

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

const { whatsAppTopics, selectedTopics, setSelectedTopics } = useContext(
    WhatsAppConfigContext
  );

  function handleChangeCheckBox(e) {
    const clickedTopic = e.target;
    if (clickedTopic.checked) {
      setSelectedTopics([...selectedTopics, clickedTopic.value]);
    }
    if (!clickedTopic.checked) {
      const updatedSelectedTopics = selectedTopics.filter(
        (selectedTopic) => selectedTopic !== clickedTopic.value
      );

      setSelectedTopics(updatedSelectedTopics);
    }
  }

{
  "name": "frontend",
    // add proxy, so instead of looking at front end server, our api requests look at backend server
    // call it prox, then add the loopback address and the backend server port
  "proxy": "http://127.0.0.1:8080",
  "version": "0.1.0",

<OrangeLink to={{
                  pathname: `/dapps/p2p/my-trades/create-trade/${item?.idAdvert}`,
                  state: { prevPath: '/my-chats',
                  participant: item?.participant?.name}}
                }>
                Create trade
              </OrangeLink>

const Nav = styled.div`
    div > a.active > div {
        color: ${props => props.color}
     }
`
function Header() {
    const {DefaultColor} = useContext(GlobalContext)
    return <Nav color={DefaultColor?.success} />
}

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

const App = () => {
  const [counterA, setCounterA] = useState(0);
  const [counterB, setCounterB] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setCounterA(counterA + 1);
        }}
      >
        Increment A
      </button>
      <button
        onClick={() => {
          setCounterB(counterB + 1);
        }}
      >
        Increment B
      </button>
      <div>counterA: {counterA}</div>
      <div>counterB: {counterB}</div>
    </div>
  );
};

export default App;

//Using Inline Styles
import React from 'react';

function App() {
  return (
    <div
      style={{
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }}
    />
  );
}

export default App;

//Conditional Changing the Background Color in React
import React from 'react';

function App() {
  const isBackgroundRed = true;

  return (
    <div
      style={{
        backgroundColor: isBackgroundRed ? 'red' : 'blue',
      }}
    />
  );
}

export default App;

//OR

//App.js
import React from 'react';
import './App.css';

function App() {
  const isBackgroundRed = true;
  
  return (
    <div className={isBackgroundRed ? 'background-red' : 'background-blue'} />
  );
}

export default App;
//App.css
.background-red {
  background-color: red;
}

.background-blue {
  background-color: blue;
}

//logs a table of users who use Yuan currency, displays all info
const onlyYuanUsers = users.filter( user => user.currency === "Yuan Renminbi")
console.table(onlyYuanUsers)

//just display iddx, id, and currency
console.table(onlyYuanUsers, ['id', 'currency'])

//Provider Component
import React, { Component } from 'react';

// Create new context
const MyContext = React.createContext();

// Create the Provider that will pass down state and methods to the rest of the application.
class MyProvider extends Component {
  state = {
    name: 'Dominic',
    age: 28,
  };
  render() {
    return (
      <MyContext.Provider value={{
        state: this.state,
        addYear: () => this.setState({
          age: this.state.age + 1
        })
      }}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

// Create the consumer that will consume the data provided by the Provider.
class Company extends Component {
  render() {
    return(
      <div className="company">
        <MyContext.Consumer>
          {(context) => (
            //Fragment added here since you can only return one child
            <>
              <p>Welcome to {context.state.name}</p>
              <p>We are {context.state.age} years old!</p>
              <button onClick={context.addYear}>Add Year</button>
            </>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

// We'll nest our Consumer inside another component just to show that we don't need to pass props to each component.
const Companies = () => (
  <div>
    <Company />
  </div>
)

class App extends Component {
  render() {
    return (
      // Ensure the provider wraps all the components you want to share data between.
      <MyProvider>
        <div className="App">
          <Companies />
        </div>
      </MyProvider>
    );
  }
}

export default App;