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;
