title: Recursive function in Reactjs Hooks?
body: <p>I want to update the state using react Hooks <code>useState();</code> ?</p>
  
  <p>Here is an example : </p>
  
  <p>I have global state on top of the app:</p>
  
  <pre><code>const [familyTree, setFamilyTree] = useState([
      {
        fam_id: 1,
        name: "No name",
        attributes: {
          "Key1": "*",
          "Key2": "*",
        },
        children: [
          {
            fam_id: 2,
            name: "No Name2",
            attributes: {
              "Key1": "*",
              "Key2": "*",
            },
          },
        ],
      },
    ]);
  
  </code></pre>
  
  <p>I have a current object to update the global state: </p>
  
  <pre><code>let res = {
            fam_id: 2,
            name: "No Name2",
            attributes: {
              "Key1": "Update this",
              "Key2": "*",
            },
          },
  </code></pre>
  
  <p>Recursive function in this case helps me to update global state with matched ID, but I have problem now, </p>
  
  <pre><code>const matchAndUpdate = (updater, target) =&gt; {
        if (updater.fam_id === target.fam_id) {
          target.name = updater.name;
          target.attributes = updater.attributes;
        }
  
        if ("children" in target &amp;&amp; Array.isArray(target.children)) {
          target.children.forEach((child) =&gt; {
            matchAndUpdate(updater, child);
          });
        }
      };
      familyTree.forEach((g) =&gt; {
        matchAndUpdate(res, g);
        setFamilyTree({ ...g }); // here is my try, this works on start, but on secound update i got error about forEach is not a function...
      });
  </code></pre>
  
  <p><strong>I don't know where to update state</strong> on correct way?</p>
  
  <p>Thanks, o/</p>