Invalid hook call. How can I call dispatch? - reactjs

Question

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

Answer 1

This is the mistake you have made. call brackets() are missing in your useDispatch declaration.
it should be corrected like below
const dispatch = useDispatch();
Error is totally valid because now your dispatch is not the output of useDispatch. It's useDispatch itself and error is due to useDispatch hook is used inside handleSubmit.