react component

component.jsx

const userFormReducer = (state, action) => {
	switch (action.type) {
		case actionTypes.INPUT_CHANGE: {
			return {
				...state,
				[action.name]: action.value
			}
		}
		default:
			return state;
	}
};

const NewEditUserModal = (props) => {
	const [state, dispatch] = useReducer(userFormReducer, props.user || {});

	const handleInputChange = (name, value) => {
		dispatch({type: actionTypes.INPUT_CHANGE, value, name})
	};

	return (
			<React.Fragment>
				<form>
					<span>User Modal</span>
					<label>
						Full Name:
						<input type="text" value={state.fullName} onChange={(e) => {
							handleInputChange('fullName', e.target.value)
						}}/>
					</label>
					<Button onClick={props.closeModal} type="button">Close</Button>
				</form>
				{state.fullName}
			</React.Fragment>
	);
};