CODE EXAMPLE FOR JAVASCRIPT

useReducer

import './App.css';
import { useState, useReducer } from 'react';


function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return ({ ...state, count: state.count + 1 })
    case 'decrement':
      return ({ ...state, count: state.count - 1 })
    case 'tgColor':
      return ({ ...state, color: (!state.color) })
    case 'handleInputChange':
      return ({ ...state, name: action.payload })
  }
}

function App() {

  const [state, dispatch] = useReducer(reducer, { count: 0, color: false, name: "" })

  // const [name, setName] = useState("")
  // const [count, setCount] = useState(0)
  // const [color, setColor] = useState(false);

  const handleInputChange = (e) => {
    dispatch({ type: "handleInputChange", payload: e.target.value })
  }

  const colorCode = "#b81f00";

  return (
    <div className="App">
      <form action="">
        <input type="text" onChange={handleInputChange} value={state.name} placeholder="Enter Name" />
      </form>
      <h3 style={state.color ? { color: "red" } : { color: "black" }}>{state.count}</h3>
      <button className="btn" onClick={() => dispatch({ type: "increment" })}>+</button>
      <button className="btn" onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button className="btn" onClick={() => dispatch({ type: "tgColor" })}>Color</button>
      <h2 style={state.color ? { color: "red" } : { color: "black" }}>{state.name}</h2>
    </div>
  );
}

export default App;