title: Best way to create as many unique useState as cleanly as possible?
body: <p>I am trying to figure out how to create as many useState as cleanly (keeping DRY principle in mind) as possible.</p>
  <p>The problem I am trying to solve is that currently I have a menu list of items and its relative prices. The website lets the customer use a drop down menu to choose how many orders of that item he/she wants.</p>
  <p>My question is that I know for one menu item, I can use <code>useState</code> to make something like</p>
  <pre><code>const [order, setOrder] = useState({});
  </code></pre>
  <p>where the key-value pair would be <code>name</code> and <code>number of orders</code></p>
  <p>Now my question is: suppose I have N many menu items, how can I create as many <code>const [order, setOrder] = useState({})</code> as I need? I know I can't put useState in a for-loop so that's out of the question (?)</p>
  <p>The below is my code I'm trying to work out:</p>
  <pre><code>export default function MenuPage() {
  
      // getting the menu items and prices from firebase
  
      const [menuItems, setMenuItems] = useState({});
      React.useEffect(async () =&gt; {
          const result = await querySnapShot();
          result.forEach((doc) =&gt; {
              setMenuItems(doc.data());
          })
      }, []);
  
      return(
         
         {
              Object.keys(menuItems).map((key) =&gt; {
                  return (
                      &lt;Box
                          key={key}
                          display='flex'
                          flexDirection='row'
                          alignItems='center'
                          justifyContent='center'
                          textAlign='center'
                          borderBottom='0.5px solid black'
                          sx={{ my: 10, mx: 10 }}&gt;
                          &lt;Box flex={1} textAlign='center' sx={{ fontSize: '35px', }}&gt;
                              {key}:
                          &lt;/Box&gt;
                          &lt;br /&gt;
                          &lt;Box flex={1} textAlign='center' sx={{ fontSize: '25px' }}&gt;
                              ${menuItems[key]}0
                          &lt;/Box&gt;
                          &lt;Box flex={1} display='flex' flexDirection='row' alignItems='center' justifyContent='end' sx={{ width: '50px' }}&gt;
                              {/* &lt;Typography flex={0} sx={{ mr: 5, fontFamily: 'Poppins', fontSize: '25px' }}&gt;Order: &lt;/Typography&gt; */}
                              &lt;Box flex={0.5} textAlign='center'&gt;
                                  &lt;FormControl fullWidth&gt;
                                      &lt;InputLabel id=&quot;demo-simple-select-label&quot;&gt;Order&lt;/InputLabel&gt;
                                      &lt;Select
                                          value={order}
                                          name={key}
                                          label=&quot;Order&quot;
                                          onChange={handleChange}&gt;
                                          &lt;MenuItem value={1}&gt;1&lt;/MenuItem&gt;
                                          &lt;MenuItem value={2}&gt;2&lt;/MenuItem&gt;
                                          &lt;MenuItem value={3}&gt;3&lt;/MenuItem&gt;
                                      &lt;/Select&gt;
                                  &lt;/FormControl&gt;
                              &lt;/Box&gt;
                          &lt;/Box&gt;
  
                      &lt;/Box&gt;
                  );
              })
          }
  
      );
  
  }
  </code></pre>