title: React Hook [useState]: update state and rerender the view
body: <p><strong>Experience</strong>: I am a total beginner in React.</p>
  
  <p><strong>What I am trying to learn:</strong> Hooks (<code>useState</code>) - but I do not know how to update the state and rerender the view with this. As far as I understood React does not rerender the view if the updated state is somewhat similar to the last one... After googling, I tried to copy the state and update it somehow, but I am missing something, and I do not know what.</p>
  
  <p><strong>What I am trying to do in the project</strong>: I have a list of countries I want to filter through when the user selects a region from a dropdown. This is the function that gets fired when the selection happens, along with comments that I hope explain what I am trying to do: </p>
  
  <pre><code>    const change = event =&gt; {
          //copy the `data` state (which has a list of all the countries)
          let newData = [...data];
          console.log(newData);
  
          //filter through the countries list to get only those with the selected region
          let filtered = newData.filter(obj =&gt; obj.region === event.target.value);
          console.log(filtered);
  
          //change the countries list with the filtered one, and rerender the view
          setData([data, newData]);
          console.log(data);
      };
  </code></pre>
  
  <p>You can find the file and the code in question <a href="https://stackblitz.com/edit/react-bbneix?file=Countries-List.js" rel="nofollow noreferrer">HERE</a> (scroll down to get to the <code>change</code> function)</p>
  
  <ol>
  <li><p>Select a region from the 'Fitler by region dropdown'</p></li>
  <li><p>See the errors/outputs in the console</p></li>
  </ol>