title: React - how to use hooks to hide or show a component based on an onChange event
body: <p>I'm trying to figure out how to use react hooks to hide or show a component based on an onChange event (a selected option being selected in a form).</p>
  
  <p>I have a component called Animal, which will be hidden until someone selects 'animals' from a select menu in a form.</p>
  
  <p>This is what I have tried to make:</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import useForm from "react-hook-form";
  import { withRouter } from "react-router-dom";
  import Select from "react-select";
  import Animal from "./tips/Animal";
  
  
  const specialFeatures = [
    { value: "animals", label: "Animals" },
    { value: "none", label: "None of these apply" }
  ];
  
  const Method = props =&gt; {
    const { register, handleSubmit, setValue, errors, reset } = useForm();
  
    const [valuesSpecialFeatures, setSpecialFeatures] = useState([]);
    const [showAnimal, setShowAnimal] = useState(false);
  
  
    const handleMultiChangeSpecialFeatures = selectedOption =&gt; {
      setValue("specialFeatures", selectedOption, true);
      setSpecialFeatures(selectedOption);
      if selectedOption === 'animals' setAnimal(!&lt;Animal /&gt;)
    };
  
  
    return (
      &lt;div&gt;
  
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
  
            &lt;label&gt;Does this proposal incldue any of these features?&lt;/label&gt;
            &lt;Select
              className="reactSelect"
              name="specialFeatures"
              placeholder="Select at least one"
              value={valuesSpecialFeatures}
              options={specialFeatures}
              onChange={handleMultiChangeSpecialFeatures}
              isMulti
            /&gt;
  
            { showAnimal &amp;&amp; "animals" &lt;Animal /&gt; }
  
            &lt;input type="submit" value="next" /&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
    );
  };
  
  export default withRouter(Method);
  </code></pre>
  
  <p>I'm trying to test if the form field named specialFeatures has a selectedOption that includes the value 'animals', then if it does, I want to display the Animal component beneath that field.</p>
  
  <p>This attempt is clearly incorrect, but I can't see how to set the useEffect to toggle visibility.</p>