title: React - How to convert a nested object into a array
body: <p>I have the following object that I would like to convert it into an array of object and each object from the array to have the key: value[0].</p>
  <p>object:</p>
  <pre class="lang-js prettyprint-override"><code>const obj = {
     comedy: ['book1', 'book2'],
     action: ['book3', 'book4'],
     drama: ['book5'],
  }
  </code></pre>
  <p>output</p>
  <pre class="lang-js prettyprint-override"><code>const arr = [
  {comedy: 'book1'},
  {comedy: 'book2'},
  {action: 'book3'},
  {action: 'book4'},
  {drama: 'book5'},
  ]
  </code></pre>
  <p>So far I have tried solving this with loops and using <code>Object.entries</code>. But I do not get the output I need.</p>
  <pre class="lang-js prettyprint-override"><code>let result = [];
  
  for(const [key1, value1] of Object.entries(arr)) {
    for (const [key2, value2] of Object.entries(value1)) {
      if(result[key2]) {
        result[key2] [key1] = value2
      } else {
        result[key2] = {[key1]: value2}
      }
    }
  }
  
  console.log(result)
  </code></pre>
  <p>I have also tried to loop recalling the function inside itself. (I have found this search for the answer). But it will get stucked in a infinite loop.</p>
  <pre class="lang-js prettyprint-override"><code>const result = [];
  
  const getArray = (obj) =&gt; {
    if (!obj) return;
  
    const {keys, ...rest} = obj;
    result.push({...rest});
    getArray(keys);
  }
  
  console.log('here', getArray(arr));
  </code></pre>