title: React .map not re-rendering on state change in functional component
body: <pre><code>const [fullProductCostingDataState, setFullProductCostingDataState] = useState([]);
  
  // update of state done here
  
  {fullProductCostingDataState.map((item, index) =&gt; {
       return (
           &lt;p key={index}&gt;{item[&quot;materialName&quot;]}&lt;/p&gt;
       )
  })} 
  </code></pre>
  <p>Sorry I know this is a potentially stupid question but I know the .map function is only rendered once and then even if the state changes the data is not re-mapped to the page but how do I solve this as I need it to list the items in the state. All replies I found online mention using render() but I'm using a functional component so don't have render, can I use hooks to force it to update or is .map completely the wrong thing to be using for this.</p>
  <pre><code>function ItemRow(props) {
      let data = props.fullData;
      let newItem = { &quot;id&quot;: props.id, &quot;materialName&quot;: props.name, &quot;value&quot;: totalPrice }
      data.push(newItem);
      props.setFullData(data);
  }
  </code></pre>
  <p>That's a watered-down version of how I'm updating the state (the full version has a lot of if statements in to check for various things and remove duplicates), guessing I'm mutating it?</p>