title: Convert an array to array map in reactjs firebase
body: <p>In my app, user can input the timings of his slots and the data will be stored in the firebase, but the data is not being stored as a map. It's being stored like this, can someone tell how to achieve this or share a tutorial.<a href="https://i.stack.imgur.com/ZssbW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZssbW.png" alt="firebase 1" /></a></p>
  <p>I want it to be stored as an array map, where people can add multiple slots instead of just one slot, i realise i need it store as an array map but i am not able to create one, something like this :</p>
  <p><a href="https://i.stack.imgur.com/DFcOi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DFcOi.png" alt="enter image description here" /></a></p>
  <p>Code :</p>
  <pre><code>const [recipes, setRecipes] = useState([])
  const [form, setForm] = useState({
  ingredients: [],
  
  const [popupActive, setPopupActive] = useState(false)
  
  const recipesCollectionRef = collection(db, &quot;recipes&quot;)
  
  useEffect(() =&gt; {
  onSnapshot(recipesCollectionRef, snapshot =&gt; {
    setRecipes(snapshot.docs.map(doc =&gt; {
      return {
        id: doc.id,
        viewing: false,
        ...doc.data()
      }
    }))
  })
  }, [])
  
  const handleSubmit = e =&gt; {
  e.preventDefault()
  
  if (
    !form.ingredients ||
    !form.steps
  ) {
    alert(&quot;Please fill out all fields&quot;)
    return
  }
  
  addDoc(recipesCollectionRef, form)
  
  setForm({
    ingredients: [],
    steps: []
  })
  
  setPopupActive(false)
  }
  
  const handleIngredient = (e, i) =&gt; {
  const ingredientsClone = [...form.ingredients]
  
  ingredientsClone[i] = e.target.value
  
  setForm({
    ...form,
    ingredients: ingredientsClone
  })
  }
  
   return (
  &lt;div className=&quot;App&quot;&gt;
    &lt;h1&gt;My recipes&lt;/h1&gt;
  
    &lt;button onClick={() =&gt; setPopupActive(!popupActive)}&gt;Add recipe&lt;/button&gt;
  
    &lt;div className=&quot;recipes&quot;&gt;
      { recipes.map((recipe, i) =&gt; (
        &lt;div className=&quot;recipe&quot; key={recipe.id}&gt;
  
          { recipe.viewing &amp;&amp; &lt;div&gt;
            &lt;h4&gt;Ingredients&lt;/h4&gt;
            &lt;ul&gt;
              { recipe.ingredients.map((ingredient, i) =&gt; (
                &lt;li key={i}&gt;{ ingredient }&lt;/li&gt;
              ))}
            &lt;/ul&gt;
  </code></pre>