title: React - Collect data in a react form - react hooks
body: <p>I want to collect all the data from a form</p>
  <p>I'm using react hooks. From my understanding of hooks, I just need to use a set to update a variable. Currently this doesn't work for me.</p>
  <p>I want to collect all the information, then console.log it within my onSubmit form for my next step</p>
  <p>I created a <a href="https://codesandbox.io/s/serverless-lake-lmnr7" rel="nofollow noreferrer">code sandbox</a> with the working code as well</p>
  <p>Any explanation is appreciated</p>
  <pre><code>const SearchBar = () =&gt; {
    const [searchData, setSearchData] = useState({
      startDate: &quot;&quot;,
      endDate: &quot;&quot;,
      inputField: &quot;&quot;,
      platformToSearch: &quot;&quot;
    });
    const { handleSubmit, register, reset, control } = useForm({ defaultValues });
    const [selectedStartDate, setSelectedStartDate] = useState(
      new Date(&quot;2014-08-18T21:11:54&quot;)
    );
    const [selectedEndDate, setSelectedEndDate] = useState(
      new Date(&quot;2014-20-18T21:11:54&quot;)
    );
  
    /*dropdown for social platforms*/
    const [query, setQuery] = useState([]);
    const [expanded, setExpanded] = useState(false);
    // const myRef = useRef(null);
  
    const showPlatformOptions = () =&gt; {
      if (!expanded) {
        setExpanded(true);
      } else {
        setExpanded(false);
      }
    };
  
    const handlePlatformQueryChange = event =&gt; {
      if (event.target.checked &amp;&amp; !query.includes(event.target.value)) {
        setQuery([...query, event.target.value]);
      } else if (!event.target.checked &amp;&amp; query.includes(event.target.value)) {
        setQuery(query.filter(q =&gt; q !== event.target.value));
      }
      setSearchData({ ...searchData.platformToSearch, query });
    };
  
    const handleStartDateChange = date =&gt; {
      //console.log(&quot;Selected start date:&quot;, date._d)
      // useEffect(() =&gt; {
      //   setSearchData(...searchData.startDate, date._d);
      // }, [searchData]);
      setSearchData(...searchData.startDate, date._d);
      setSelectedStartDate(date._d);
    };
    const handleEndDateChange = date =&gt; {
      //console.log(&quot;Selected end date:&quot;, date)
      setSearchData(...searchData.endDate, date._d);
      setSelectedEndDate(date._d);
    };
  
    const onSubmit = data =&gt; {
      // How should this be
      //updated to store all the slected items from the form
  
      console.log(&quot;Collected Data:&quot;, searchData);
      console.log(&quot;searchData:&quot;, searchData);
      alert(JSON.stringify(data, null, 2));
      reset(defaultValues);
    };
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={handleSubmit(data =&gt; onSubmit(data))}&gt;
          &lt;div className=&quot;flex&quot;&gt;
            &lt;SelectSocialPlatform
              query={query}
              expanded={expanded}
              onClick={showPlatformOptions}
              onChange={handlePlatformQueryChange}
            /&gt;
            &lt;Calendar
              name=&quot;StartDate&quot;
              label=&quot;START DATE&quot;
              value={selectedStartDate}
              onChange={handleStartDateChange}
            /&gt;
            &lt;Calendar
              name=&quot;EndDate&quot;
              label=&quot;END DATE&quot;
              value={selectedEndDate}
              onChange={handleEndDateChange}
            /&gt;
  
            &lt;InputField
              name=&quot;inputField&quot;
              placeholder=&quot;Search by keywords, #hashtags, or @socialmediahandles&quot;
              refs={register}
              className=&quot;border-blue-200 border rounded w-full h-20 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline&quot;
            /&gt;
  
            &lt;SearchButton
              className=&quot;bg-blue-800 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded h-20 w-40&quot;
              text=&quot;Search&quot;
              onClick={handleSubmit(onSubmit)}
              type=&quot;submit&quot;
            /&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default SearchBar;
  </code></pre>