I cannot understand what the error is and why e.currentTarget.value is null

Question

I ran into the following error while writing an application in react-typescript: error:

TypeError: Cannot read property 'value' of null (anonymous function) D:/GitRepositories/laratte-react/src/containers/SignIn/SignIn.tsx:34

31 |

32 | const onChangeFormInputsHandler = (e: React.FormEvent, key: string) => {

33 | setForm(prev => {

-> 34 | console.log(e.currentTarget.value, key);

| ^ 35 | return {

36 | ...prev,

37 | inputs: {

SignIn D:/GitRepositories/laratte-react/src/containers/SignIn/SignIn.tsx:8

5 |

6 | const SignIn: React.FC = () => {

7 |

-> 8 | const [form, setForm] = useState({

9 | inputs: {

10 | email: {

11 | value: "",

code:

SignIn Component

const SignIn: React.FC = () => {
   const [form, setForm] = useState<FormConfig>({
      inputs: {
         email: {
            value: "",
            placeholder: "Enter your E-mail",
            type: "email",
            label: "e-mail",
            isClicked: false,
            valid: false,
         },
         password: {
            value: "",
            type: "password",
            label: "password",
            placeholder: "Enter your password",
            isClicked: false,
            valid: false
         }
      },
      onSubmit: (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault() },
      valid: false
   });
   const onChangeFormInputsHandler = (e: React.FormEvent<HTMLInputElement>, key: string) => {
      setForm(prev => {
         console.log(e.currentTarget.value, key);
         return {
            ...prev,
            inputs: {
               ...prev.inputs,
               [key]: {
                  ...prev.inputs[key],
                  value: e.currentTarget.value
               }
            }
         };
      });
   }
   return (
      <>
         <Form form={form} onChange={onChangeFormInputsHandler} />
      </>
   );
}


export default SignIn;

Form component

type FormPropsType = {
   form: FormConfig,
   onChange: (e: React.FormEvent<HTMLInputElement>, key: string) => void
}
const form: React.FC<FormPropsType> = props => {
   const { inputs, onSubmit, valid } = props.form;
   let formInputs = [];
   for (const key in inputs) {
      formInputs.push({
         name: key,
         ...inputs[key]
      });
   }
   return (
      <>
         <div className="form-container">
            <div className="form-container__title">
            </div>
            <div className="form-container__form">
               <form action="">
                  {formInputs.map(input => <Input
                     key={input.name}
                     {...input}
                     onChange={props.onChange} />)}
               </form>
            </div>
         </div>
      </>
   );
}
export default form;

Input component

interface InputPropsType extends InputInterface {
   name: string,
   onChange: (e: React.FormEvent<HTMLInputElement>, key: string) => void
}
const input: React.FC<InputPropsType> = props => {
   return (
      <div className="form__control">
         {props.label ? <label htmlFor="">{props.label}</label> : null}
         <input
            className="form__input"
            type={props.type}
            value={props.value}
            name={props.name}
            placeholder={props.placeholder}
            onChange={(e: React.FormEvent<HTMLInputElement>) => props.onChange(e, props.name)}
         />
      </div>
   );
}
export default input;

The error appears after entering a second character in any of the input. The problem is most likely not that the state object is being overwritten, but with the event handler.

ShnirCourier ShnirCourier · Accepted Answer · 2021-05-02T23:41:41

To solve this problem, it was necessary to add only one line.

And then use this variable

const onChangeFormInputsHandler = (e: React.FormEvent<HTMLInputElement>, key: string) => {
   const formValue = e.currentTarget.value; // this line   
setForm(prev => {
         console.log(formValue, key);
         return {
            ...prev,
            inputs: {
               ...prev.inputs,
               [key]: {
                  ...prev.inputs[key],
                  value: formValue
               }
            }
         };
      });
   }

I cannot understand what the error is and why e.currentTarget.value is null

1 Answers