title: Updating values of multidimensional object in JS
body: <p>I have been reading different post about this, but in the end the result its the same, I cannot update the values of the object working with.
  I am sending the key/value pair as if they were completely independent. I hope I can explain clearly:
  So the object I get from BE looks like this:</p>
  <pre><code>    {
          id: 3,
          name: 'something',
          display: true,
          type: 'customer',
          preferences: {
              food: 'meat',
              allergies: {
                  key: 'value',
              },
          
          }
  
      }
  </code></pre>
  <p>So what did I do so far? Since this is a bigger object, with other nested ones (I keep it simple here, there is no need to paste everything) I had to filter some of them in order to keep the code organised.
  That is why I have started doing like this:</p>
  <ol>
  <li>render everything that does not have an object as a value</li>
  </ol>
  <pre><code>                        {Object.entries(parendtObj)
                              .filter(([key, value]) =&gt; {
                                  return typeof value !== 'object'
                              })
                              .map(([key, value], index) =&gt; {
                                  return (
                                              &lt;Fragment key={index}&gt;
                                                  &lt;RHField
                                                      type=&quot;text&quot;
                                                      label={key}
                                                      name={key}
                                                      onChange={e =&gt;
                                                          setValue({
                                                              ...parendtObj,
                                                              [key]: e.target.value,
                                                          })
                                                      }
                                                  /&gt;
                                              &lt;/Fragment&gt;
                                  );
                              })}
  </code></pre>
  <p>OK, everything good until here. So what I did after this? tried to do the same but instead of taking only the parentOjb, I would go one step further:</p>
  <pre><code>                        {Object.entries(parendtObj.preferences)
                              .filter(([key, value]) =&gt; {
                                  return typeof value !== 'object'
                              })
                              .map(([key, value], index) =&gt; {
                                  return (
                                              &lt;Fragment key={index}&gt;
                                                  &lt;RHField
                                                      type=&quot;text&quot;
                                                      label={key}
                                                      name={key}
                                                      onChange={e =&gt;
                                                          setValue({
                                                              ...parendtObj,
                                                              preferences: {
                                                              [key]: e.target.value,
                                                             },
                                                          })
                                                      }
                                                  /&gt;
                                              &lt;/Fragment&gt;
                                  );
                              })}
  </code></pre>
  <p>But what happens in this case is that I cannot update the values of the keys inside &quot;preferences&quot;, instead they are sent as new key/value pairs.</p>
  <p>I guess many will point out here</p>
  <pre><code>                                     onChange={e =&gt;
                                                          setValue({
                                                              ...parendtObj,
                                                              preferences: {
                                                              [key]: e.target.value,
                                                             },
                                                          })
                                                      }
  </code></pre>
  <p>Well, I lost track of how many different ways I have tried there, the issue is still the same,  they dont get updated like in the first snippet I pasted.
  What is it I am doing wrong?
  Is there any easier way to update the values of an object like this?
  Would you recommend to flatten the object? or maybe filter the object and use the prototype.flat against the array?</p>