title: Invalid hook call. How can I call dispatch?
body: <p>I'm trying to send data from inputs to redax storage. Why does the <code>dispatch(addChild(parent))</code> get an error?</p>
  <p><code>Error: Invalid hook call. Hooks can only be called inside of the body of a function component</code></p>
  <pre><code>import {useDispatch} from &quot;react-redux&quot;;
  import { addChild} from &quot;../../store/actions/actions&quot;;
  
  const Form = () =&gt; {
      const [parent, setParent] = useState([{name: &quot;&quot;, age: &quot;&quot;}]);
      const [childList, setChildList] = useState([{name: &quot;&quot;, age: &quot;&quot;}])
      const dispatch = useDispatch;
  
      const handleChange = (e, index) =&gt; {
          const { name, value } = e.target;
          const child = [...childList];
          child[index][name] = value;
          setChildList(child)
      }
  
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          dispatch(addChild(parent))
      }
  
      const addChildElement = ()=&gt; {
          setChildList( [...childList, {name: &quot;&quot;, age: &quot;&quot;}]);
      }
  
      return (
          &lt;form className=&quot;form&quot; onSubmit={handleSubmit}&gt;
              &lt;div className=&quot;form__parent&quot;&gt;
                  &lt;div className=&quot;form-title&quot;&gt;Персональные данные&lt;/div&gt;
                  &lt;div className=&quot;form-item&quot;&gt;
                      &lt;input className=&quot;form-input&quot; type=&quot;text&quot;
                             value={parent.name}
                             onChange={(e) =&gt; setParent({...parent, name: e.target.value})}
                      /&gt;
                      &lt;label className=&quot;form-label&quot;&gt;Имя&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-item&quot;&gt;
                      &lt;input className=&quot;form-input&quot; type=&quot;number&quot;
                             value={parent.age}
                             onChange={(e) =&gt; setParent({...parent, age: e.target.value})}
                      /&gt;
                      &lt;label className=&quot;form-label&quot;&gt;Возраст&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form__child&quot;&gt;
                  &lt;div className=&quot;form__child-head&quot;&gt;
                      &lt;div className=&quot;form-title&quot;&gt;Дети (макс.5)&lt;/div&gt;
                      &lt;button className=&quot;btn add-child-btn&quot; onClick={addChildElement}&gt;Добавить ребенка&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;ul className=&quot;form__child-content&quot;&gt;
                      {
                          childList.map((value, id) =&gt; {
                              return (
                                  &lt;li className=&quot;child-list&quot; key={id}&gt;
                                      &lt;div className=&quot;form-item&quot;&gt;
                                          &lt;input className=&quot;form-input&quot; type=&quot;text&quot;
                                                 name=&quot;name&quot;
                                                 value={value.name}
                                                 onChange={e =&gt; handleChange(e, id)}
                                          /&gt;
                                          &lt;label className=&quot;form-label&quot;&gt;Имя&lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div className=&quot;form-item&quot;&gt;
                                          &lt;input className=&quot;form-input&quot; type=&quot;number&quot;
                                                 value={value.age}
                                                 name=&quot;age&quot;
                                                 onChange={e =&gt; handleChange(e, id)}
                                          /&gt;
                                          &lt;label className=&quot;form-label&quot;&gt;Возраст&lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;button className=&quot;remove-list&quot;&gt;Удалить&lt;/button&gt;
                                  &lt;/li&gt;
                              );
                          })
                      }
                  &lt;/ul&gt;
                  &lt;input className=&quot;btn submit&quot; type=&quot;submit&quot; value=&quot;Сохранить&quot; /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      );
  }
  
  export default Form;`
  </code></pre>