useReducer

by Matt Tyson

HTML

<div id="root" />

CSS

input {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  margin: 10px;
}

p {
  font-size: 16px;
  margin-top: 10px;
  font-family: Fira Code, Consolas, Source Code Pro, monospace;
}

React

const {useReducer, Fragment} = React;


const initialState = {
  text: "",
  isUpperCase: false,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_TEXT':
      return {
        ...state,
        text: action.text,
      };
    case 'TOGGLE_UPPER_CASE':
      return {
        ...state,
        text: state.text.toUpperCase(),
      };
    case 'LOWERCASE':
      return {
        ...state,
        text: state.text.toLowerCase(),
      };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleChange = (event) => {
    dispatch({ type: 'SET_TEXT', text: event.target.value });
  };

  const handleToggleUpperCase = () => {
    dispatch({ type: 'TOGGLE_UPPER_CASE' });
  };

  const handleLowerCase = () => {
    dispatch({ type: 'LOWERCASE' });
  };

  return (
    <div>
      <input type="text" value={state.text} onChange={handleChange} />
      <button onClick={handleToggleUpperCase}>Toggle Upper Case</button>
      <button onClick={handleLowerCase}>Toggle Lower Case</button>
      <p>{state.text}</p>
    </div>
  );
};


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <App />
);