My First Component to Toggle Color and Color Name

 import { Fragment, useState, useReducer } from 'react';

function reducer(state, action) {

  console.log(state);

  console.log(action);

  switch (action.type) {

    case 'Green':

      return action.type;

      break;

    case 'Red':

      return action.type;

      break;

    case 'Yellow':

      return action.type;

      break;

    case 'Pink':

      return action.type;

      break;

  }

  return state;

}

function Toggle() {

  //const [state, setState] = useState('pink');

  const [state, dispatch] = useReducer(reducer, 'Pink');

  return (

    <Fragment>

      The color is{' '}

      <span style={{ backgroundColor: state, padding: '5px' }}> {state} </span>

      <button

        onClick={() => {

          dispatch({ type: 'Green' });

        }}

      >

        Green

      </button>

      <button

        onClick={() => {

          dispatch({ type: 'Red' });

        }}

      >

        Red

      </button>

      <button

        onClick={() => {

          dispatch({ type: 'Yellow' });

        }}

      >

        Yellow

      </button>

      <button

        onClick={() => {

          dispatch({ type: 'Pink' });

        }}

      >

        Pink

      </button>

    </Fragment>

  );

}

export default Toggle;