title: React: How to convert JSON Object to Array and render it?
body: <p>I have a big local JSON file containing League of Legends champions information. I want to output random champion data (name, title, etc...). For that I'm converting it to Object and then to Array so that I could use it with map().
  The issue is that when I convert it from Object to Array, I lose property names which in my mind isn't right.</p>
  
  <p>Object example with all property names as in JSON file</p>
  
  <pre><code>champObject:
  id: "jarvaniv"
  key: "59"
  name: "Jarvan IV"
  sprite: {url: "http://ddragon.leagueoflegends.com/cdn/8.11.1/img/sprite/champion1.png", x: 96, y: 48}
  stats: {hp: 571.2, hpperlevel: 90, mp: 302.2, mpperlevel: 40, movespeed: 340, …}
  tags: (2) ["Tank", "Fighter"]
  title: "the Exemplar of Demacia"
  __proto__: Object
  </code></pre>
  
  <p>Converted to Array example. Please note absence of property names</p>
  
  <pre><code>champData: Array(9)
  0: "jarvaniv"
  1: "59"
  2: "Jarvan IV"
  3: "the Exemplar of Demacia"
  4: (2) ["Tank", "Fighter"]
  5: {hp: 571.2, hpperlevel: 90, mp: 302.2, mpperlevel: 40, movespeed: 340, …}
  6: "http://ddragon.leagueoflegends.com/cdn/8.11.1/img/champion/JarvanIV.png"
  7: {url: "http://ddragon.leagueoflegends.com/cdn/8.11.1/img/sprite/champion1.png", x: 96, y: 48}
  8: "Prince Jarvan, scion of the Lightshield dynasty, is heir apparent to the throne of Demacia. Raised to be a paragon of his nation's greatest virtues, he is forced to balance the heavy expectations placed upon him with his own desire to fight on the front..."
  length: 9
  __proto__: Array(0)
  </code></pre>
  
  <p>This is how I used it in my MainPage.js.
  As you can see I expect to have exact property names as in my JSON file so that I could output some specific data of my choice. </p>
  
  <pre><code>import ChampionsData from '../data/champions.json'
  
  class MainPage extends React.Component {
  
  render(){
  const keys = Object.keys(ChampionsData)
  const randomKey = Math.floor(Math.random() * keys.length)
  const champObject = ChampionsData[randomKey]
  const champData = Object.values(champObject);
  
  return(
  &lt;div&gt; 
      {champData.map((value, index) =&gt; {      
        return &lt;div key={index}&gt;
          &lt;ul&gt;
          &lt;li&gt;{value.name}&lt;/li&gt;
          &lt;li&gt;{value.title}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      })}
  &lt;/div&gt;
    )
   }
  }
  export default MainPage
  </code></pre>
  
  <p>How do I need to approach this, so that I wouldn't lose actual property names?</p>