title: How to add a new json object to array which elements will be rendered as components on a page?
body: <p>I want to change a state of an array which will have values derived from data.js file as a starting point. Changing a state means running function setAllThingsArray and adding new element which will be set using a function setThingsArray based on previous state (thingsArray). Do I need to map allThingsArray to get updated array with added elements and to list them ?</p>
  <pre><code>import React from &quot;react&quot;;
  import data from &quot;../data&quot;;
  import Stamp from &quot;../components/Stamp&quot;;
  
  export default function AddItem(props) {
    
    const [thingsArray, setThingsArray] = React.useState({
      key: 9,
      img: &quot;../images/stamp1.jpg&quot;,
      name: &quot;Stamp 5&quot;,
      description: &quot;AAAA&quot;,
      rating: 78.0,
    });
  
    function addItem() {
      setAllThingsArray((prevAllThingsArray) =&gt; ({
        arr: [
          ...prevAllThingsArray.arr,
          setThingsArray((prevThingsArray) =&gt; ({
            ...prevThingsArray,
            key: prevThingsArray.key + 1,
            img: &quot;../images/stamp1.jpg&quot;,
            name: &quot;Stamp 5&quot;,
            description: &quot;AAAA&quot;,
            rating: 78.0,
          })),
        ],
      }));
    }
  
    const [allThingsArray, setAllThingsArray] = React.useState(data);
  
    const allThingsElements = allThingsArray.map((st) =&gt; {
      return &lt;Stamp key={st.key} st={st} /&gt;;
    });
  
    return (
      &lt;&gt;
        &lt;div className=&quot;form&quot;&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Image&quot; className=&quot;form--input&quot; /&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Stamp title&quot; className=&quot;form--input&quot; /&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Description&quot; className=&quot;form--input&quot; /&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Rating&quot; className=&quot;form--input&quot; /&gt;
          {/* &lt;button className=&quot;form--button&quot; onClick={addStampToJson(json_stamp)}&gt;
            Add Stamp
          &lt;/button&gt; */}
          &lt;button className=&quot;form--button&quot; onClick={addItem}&gt;
            Add Stamp
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;section className=&quot;stamps-list&quot;&gt;{allThingsElements}&lt;/section&gt;
      &lt;/&gt;
    );
  }
  
  
  </code></pre>
  <p>Is it correct to place setThingsArray function inside setAllThingsArray function?</p>