title: How to bind parameters in React hooks' setState() function?
body: <p>I have a list of country names and when clicked on one of the countries, the state of the picked country should be updated with the name of the newly selected country. This state then triggers other changes in a <code>useEffect()</code>. The state of <code>pickedCountry</code> is handled in a parent component, but the <code>setPickedCountry()</code> function is passed to the child component (which creates the country list) as a prop.</p>
  <p>When I now add a <code>onPress={props.setCountry.bind(this, country.name)}</code> to each of the list items I am getting a warning stating:</p>
  <blockquote>
  <p><strong>Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().</strong></p>
  </blockquote>
  <p>Right now I don't know how a <code>useEffect</code> would help me here. Could somebody help me out?</p>
  <hr />
  <p>These are my components:</p>
  <h3>Country Data</h3>
  <pre><code>[
      {
          &quot;name&quot;: &quot;Germany&quot;,
          &quot;data&quot;: [*SOME DATA*]
      },
      {
          &quot;name&quot;: &quot;France&quot;,
          &quot;data&quot;: [*SOME DATA*]
      }, ...
  ]
  </code></pre>
  <h3>Parent Component</h3>
  <pre><code>const [pickedCountry, setPickedCountry] = useState(null);
  
  useEffect(() =&gt; {
      if (pickedCountry!= null) {
        //Do Something
      }    
    }, [pickedCountry]);
  
  return (
      &lt;Child setPickedCountry={setPickedCountry} /&gt;
  );
  
  </code></pre>
  <h3>Child Component</h3>
  <pre><code>const [child, setChild] = useState([]);
  
  useEffect(() =&gt; {
      const myComponents= [];
      for (country of myData) {
          myComponents.push(
              &lt;TouchableOpacity 
                  onPress={props.setCountry.bind(this, country.name)} /&gt;
          )
      }
      setChild(myComponents);
  }, [someProps];
  
  return (
      {child.map((x) =&gt; x)}
  )
  </code></pre>