How can i setState of object based on the condition

[Deepak8717]

I have two state objects for input values and to store the error messages.

const [fields, setFields] =useState({
     name:"",
     email:",
     password:"",
     confrmPassword:""

})

const [error, setError] =useState({
     name:"",
     email:",
     password:"",
     confrmPassword:""

}) 

I am able to take the input and i have function that checks and return true if any value is empty

 const isEmpty = (f) => {
    if (f=== "") {
      return true;
    }
  };

I am able to loop over the input values and print the error message in console.

const handleSubmit = (e) => {
    e.preventDefault();
    Object.entries(fields).map((item) => {
      if (isEmpty(item)) {
        console.log(`Please Enter ${item[0]}`);
      }
    });
    setFields({ name: "", email: "", password: "", ConfirmPassword: "" });
  };

However, I want someone to help me set this message in error state object with their respective keys so i can show them on screen. i feel helpless with syntax

[atapas]

First of all, why do you need two state objects?

[Deepak8717]

@atapas actually i wasn't sure how to setState of nested object but now i have found the way and its working.

[atapas]

Cool, you are on the right track then. Do you want to post the solution here?

[Deepak8717]

yes , here it goes. I am making sure that my code is clean, concise and minimal. That's why its taking so long

const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    errors: {
      name: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
  });

const submitHandler = (e) => {
    e.preventDefault();
    Object.entries(values).map((value) => {
      if (isEmpty(value)) {
        setValues((prevState) => ({
          ...prevState,
          errors: {
            ...prevState.errors,
            [value[0]]: `Please fill the ${value[0]}`,
          },
        }));
      }
    });
  };

[atapas]

Just curious,

why didn't you think of the object in this way?

const [values, setValues] = useState({
    name: { value: "", error: ""},
    email: { value: "", error: ""},
    password: : { value: "", error: ""},
    confirmPassword: : { value: "", error: ""}
  });

[Deepak8717]

You know, i had thought of designing the schema the same way at the very first day. However i have never worked beyond basic data structure like arrays and object so after fiddling, here and there banging against the wall i tried to think of something easier. but that is the same schema that i wanted to work with from the start

[atapas]

So are you changing it? and can we accept the QA as answered?

[Deepak8717]

Yes, I don't know how to accept it as answer.

[atapas]

Done!