[Solved] Cannot set properties of undefined when setting the value of nested object

React JS Tarif Hossain

Problem:

when we set the value of nested object errors to

{
  email: {
    primary:"abc@gmail.com"
  }
}

After compilation, it returns an error:

Cannot set properties of undefined (setting 'primary')

App.js code

import { useState, useEffect } from "react";

export default function App() {
  const [errors, setErrors] = useState({});

  useEffect(() => {
    const Errors = errors;
    Errors.email.primary = "test@gmail.com";
  }, []);
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}


Solution:

The Errors.email is undefined. Because primary property values are defined incorrectly. Update the code like this:

Errors.email = { primary: "test@gmail.com" };

Thank you for reading the article. Hope this solution help for you.