title: Can I create state variables dynamically in React?
body: <p>This is a very simplified version of a React project I'm working on. Basically,  I have a JSON file (called data.json) which contains a property called 'data'. This property contains an array of an unknown amount of objects, and each object has key/value pairs called 'id' and 'value'.</p>
  <p>The JSON file is imported into App.js, where I need to create multiple state variables, each based on an object in the array, with the following prerequisites:</p>
  <ol>
  <li>Each state variable must have a unique name, based on the relevant object's 'id' property (e.g. data1_state, data2_state, etc.)</li>
  <li>The initial value of each state variable must be equal to the same object's 'value' property</li>
  <li>Each state variable must be returned as the value of a unique <code>&lt;input&gt;</code> field</li>
  </ol>
  <p>data.json:</p>
  <pre><code>{
      &quot;data&quot;: [
          {
              &quot;id&quot;: &quot;data1&quot;,
              &quot;value&quot;: 10
          },
          {
              &quot;id&quot;: &quot;data2&quot;,
              &quot;value&quot;: 3
          },
          {
              &quot;id&quot;: &quot;data3&quot;,
              &quot;value&quot;: 8
          },
          etc...
          etc...
          etc...
      ]
  }
  </code></pre>
  <p>This is what I have for App.js</p>
  <pre><code>import React, { useState } from 'react';
  import Data from './data.json';
  
  const data = Data.data;
  
  const App = () =&gt; {
    return &lt;&gt;
      {data.map(item =&gt; (
        &lt;div key={item.id}&gt;
          &lt;label&gt;{item.id}: &lt;input type=&quot;text&quot; value={/* STATE VARIABLE GOES HERE */} /&gt;&lt;/label&gt;
        &lt;/div&gt;
      ))}
    &lt;/&gt;;
  }
  
  export default App;
  </code></pre>
  <p>Essentially, I'm looking for a way to write</p>
  <pre><code>const[item.id + '_state', 'set' + item.id + '_state'] = useState(item.value);
  </code></pre>
  <p>for each object in the data array (this way doesn't work). Is this possible to do?</p>