Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

93
Views
ReactJS - Function to bulk overwrite nested usestate variable

I have a nested dictionary object with the following structure:

  const [fieldErrorMessage, setFieldErrorMessage] = useState({
    signinEmail: {
      show: false,
      message: "Error",
    },
    signinPassword: {
      show: false,
      message: "Error",
    },
    signupEmail: {
      show: false,
      message: "Error",
    },
    signupPassword: {
      show: false,
      message: "Error",
    },
    signupRegistrationToken: {
      show: false,
      message: "Error",
    },
  });

I created a function which should take in an array of nested dictionaries (e.g., signinEmail, signinPassword, ...) and set their value for their show key to false (without changing the value for the message property).

Here is my function:

function hideFieldErrors(setter, fieldNameArray) {
  fieldNameArray.forEach((fieldName) => {
    setter((prevState) => ({
      ...prevState,
      fieldName: {
        ...prevState.fieldName,
        show: false,
      },
    }));
  });
}

When I call it, the show values do not change. Why is that?

I'm calling it via this code:

hideFieldErrors(setFieldErrorMessage, [
    "signinEmail",
    "signinPassword",
    "signupEmail",
    "signupPassword",
    "signupRegistrationToken",
  ]);
7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

The way you have used fieldName is not working as you expected. variable name(which is a string) should be wrapped with square brackets to make it an accessible property.

Try like below.

function hideFieldErrors(setter, fieldNameArray) {
  fieldNameArray.forEach((fieldName) => {
    setter((prevState) => ({
      ...prevState,
      [fieldName]: {
        ...prevState[fieldName],
        show: false,
      },
    }));
  });
}
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.