title: How to dynamically create objects in state with react hooks?
body: <p>until now in my code, I had an object that would represent all the data for an image on the page</p>
  
  <pre class="lang-js prettyprint-override"><code>this.state = {
      img-1: {
          x: 0,
          y: 0,
          rotation: 0
      },
      img-2: {
          x: 20,
          y: 200,
          rotation: 50
      }
  }
  </code></pre>
  
  <p>every time the object receives a new child it adds a new <code>img-id</code> to state that is updated everytime <code>&lt;img id=${id} update={this.update} /&gt;</code> is updated. </p>
  
  <p>Moving functionality like calculating the coordinates or the rotation into their own custom hooks would greatly improve my code in terms of maintainability and testing but I don't really see a good way to store all of this data in a centralized object with hooks. </p>
  
  <p>As far as I understand it I'd have to set either a new</p>
  
  <pre class="lang-js prettyprint-override"><code>[img-1, setImg-1] = useState({ x: 0, y:0, rotation: 0 })
  </code></pre>
  
  <p>for every child which, as I understand it, isn't possible as hooks have to be declared at the top level or to set a very deep object that would be kind of clunky to update:</p>
  
  <pre class="lang-js prettyprint-override"><code>[images, setImages] = useState({
      img-1: {
          x: 0,
          y: 0,
          rotation: 0
      }
  })
  
  const createImg = (newImg) =&gt; { setImages({...images, newImg}) }
  
  const updateImg = (id, updatedImg) =&gt; {
      setImages({ ...images, [`img-${id}`]{...updatedImg} }
  )}
  </code></pre>
  
  <p>Is there a cleaner / more readable approach or do I just have to resort to nesting everything in one object?</p>