title: Binding properties of an array in an array
body: <p>This is not to start a discussion about Anugular vs REACT. I know at some point I will learn to love REACT. That is why I have started doing new apps in REACT. I just need some kind of confirmation whether I understand REACT correctly according to bindings.</p>
  
  <p>I am making a function REACT component (arrow function) as I can read this is the new recommended practice. I have some data with an array of data with arrays of data. I am using all of this data to show and change content. In this specific sample I use it to toggle some menu's.</p>
  
  <p>In Angular in the toggle you would have something like:</p>
  
  <pre><code>toggle(row){
     row.toggle=!row.toggle;
  }
  </code></pre>
  
  <p>As I understand it in REACT, if you want to change content, or have some states about toggle you need hooks (correct me if I am wrong). So in REACT you would apply all of your data to a setData(someData). Something like below:</p>
  
  <pre><code>const toggleMenu = (section, row) =&gt; {
    console.log(section);
  
    setDataList(
      dataList.map(s =&gt; {
        return s.id === section.id
          ? {
              ...s,
              table: s.table.map(t =&gt; {
                return t.id === row.id
                  ? { ...t, toggleDropdown: !row.toggleDropdown }
                  : t;
              })
            }
          : s;
      })
    );
  };
  </code></pre>
  
  <p>So I have to find my specific objects in my data, update it, and pass it all back to the hook setter. I have two concerns here. Sometimes I meet customer requirements where they want tons of data on a home page (even when it is not best practices). That will still perform with Angular. Anyone has some experience whether REACT will perform in such scenarios with this approach (so much looping)?</p>
  
  <p>Last have I misunderstood something, or is this normal practice when working with REACT - or have I over complicated the task? I have made a small sample here to show a sample case:</p>
  
  <p><a href="https://codesandbox.io/s/dropdown-for-multiple-maps-gmqpp?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/dropdown-for-multiple-maps-gmqpp?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  
  <p>The answer I am looking for is Yes this is the way to go, or no you have totally misunderstand the concept because .. And a plus if somebody have experince with the performance for pages with a lot of content. </p>