Uncaught TypeError: Cannot read properties of undefined (reading 'target'),

My problem is that how do i access 'handleInputChange', because i cant write 'handleInputChange' function outside the useEffect hook since it is performing a sideeffect. I would love it if someone can help me out with this situation.

1.  const [values, setValue] = useState({});
    const dispatch = useDispatch();

   let handleInputChange
    useEffect(()=>{
        handleInputChange = (e) =>{
        setValue(
            {
                values: { ...values, [e.target.name]: e.target.value }
            }, 
            () => {
            dispatch({
            type: "SET_FORMVALUES",
            payload: values
            })
        }
    )}
    handleInputChange();
    },[dispatch])

<TextField id="outlined-basic" label="First Name" variant="outlined"
                        name="firstName"
                        className='app__input'
                        placeholder='First Name'
                        type="text"
                        value={values['firstName']}
                        onChange = {handleInputChange} />

//Reducer.js

const initialState = {
  formValues: {},
  message: ""
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_FORMVALUES":
      console.log("--- Changing form data ---");
      return {
        ...state,
        formValues: action.payload
      };
    case "SUBMIT_FORM":
      return {
        ...state,
        message: "Form submitted!!"
      };
    default:
      return state;
  }
};


1 answer

  • answered 2022-01-26 19:01 ChiefMcFrank

    First, you don't need the core React useState hook, because you are using React Redux. This is actually creating a second state local to your component. Instead, use the centralized Redux store you've configured and React-Redux hooks. As long as you have wrapped your app in a context provider and passed your store to it, you can use useDispatch to update state and useSelector to retrieve state and subscribe to changes.

    Second, you don't need useEffect, as you are just updating state.

    Here's an example:

    import { useDispatch, useSelector } from 'react-redux';
    
    export default function App() {
        const formValues = useSelector((state) => state.formValues);
        const dispatch = useDispatch();
    
        const handleInputChange = (name, value) => {
            dispatch(
                {
                    type: "SET_FORMVALUES", 
                    payload: {
                        ...formValues,
                        [name]: value
                    }
                }
            );
        }
    
        return (
            <div className="App">
                <input type="text" name="FirstName" onChange={ (e) => handleInputChange(e.target.name, e.target.value)} />
                <span>{formValues["FirstName"]}</ span>
                <input type="text" name="LastName" onChange={ (e) => handleInputChange(e.target.name, e.target.value)} />
                <span>{formValues["LastName"]}</ span>
            </div>
        );
    }
    

    Much of this is probably not directly related to the error in the question title, but simplifying your code should help you debug more easily. That error may have been simply because you didn't explicitly pass the event in your onChange handler. I.e. onChange = {handleInputChange} vs. onChange = {(e) => handleInputChange(e)}

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum