Populating object values with a Array (React hooks)

Question

Im creating a medical app and i got a react class that uses hooks and looks like this.

  const ToggleSwitch = () => {
  const API_URL = "http://localhost:8081/api/doh/";
  const [medications, setMedications] = useState("");
  const [otherInfo, setOtherInfo] = useState("");

  const [values, setValues] = useState({
    asthma: "off",
    infectiousDisease: "off",
    bleedingDisorder: "off",
    cancer: "off",
    diabetes: "off",
    epilepsy: "off",
    stroke: "off",
    heartDisease: "off",
    hbp: "off",
    immuneDisorders: "off",
    lungDisease: "off",
    mentalDisorder: "off",
    rheumaticDisease: "off",
    smokeTobaccoProducts: "off",
    radiationTherapy: "off",
    eatingDisorders: "off",
    entDisorders: "off",

    latex: "off",
    localAnasthetics: "off",
    metals: "off",
    penicillin: "off",
    pollen: "off",
    foods: "off",

    bleedingGums: "off",
    bruxism: "off",
    halitosis: "off",
    ulcer: "off",
    dryMouth: "off",
    soreJawM: "off",
  });

  const handleChangeMed = (e) => {
    setMedications(e.target.value);
  };

  const handleChangeOtherInfo = (e) => {
    setOtherInfo(e.target.value);
  };

My backend returns an Array(witchValues: Array(30)) with values (off/on) for each of the values as they are used with switches. Now my question is, is there any way to populate these values in a fast way like say with a foreach loop or anything like that, rather than taking one value at a time from the Array and adding it to the individual values in the switch?

Side note i cant change the switch to an array as that does not fit my purpose when it comes to other methods that work on the switch.

Ps.The input array only contains the values it looks like this: witchValues: Array(30) 0: "off" 1: "off" 2: "off" 3: "off" 4: "off" 5: "off" 6: "off" 7: "off" 8: "off" 9: "off" 10: "on" 11: "off" 12: "off" 13: "off" 14: "off" 15: "off" 16: "off" 17: "off" 18: "off" 19: "off" 20: "off" 21: "off" 22: "off" 23: "off" 24: "off" 25: "off" 26: "off" 27: "off" 28: "off" 29: "on" length: 30

La Quoc Anh · Accepted Answer · 2021-06-10 00:55:12Z

1

let newValues = values // create a variable of value
// turn newValues into entries. 
// example {asthma: "off", cancer: "off"} => [['asthma', 'off'], ['cancer', 'off']]
// now you can map through each property of the object
let valueArray = Object.entries(newValues).map((v, index) => {
    v[1] = switchValues[index]
    return v
}
// turn entries back to object
newValues = Object.fromEntries(valueArray)
// set back into state
setValues({...newValues})

answered Jun 10, 2021 at 0:55

La Quoc Anh

1213 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr.Gomer Over a year ago

Will this work with my code? The array that comes back from the Db only contains the values not the names. Cause when i send it in as object.entries i get a strange array where the name takes one index and the value another.

La Quoc Anh Over a year ago

I tested your case and it worked perfectly.

Collectives™ on Stack Overflow

Populating object values with a Array (React hooks)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related