I am learning React, in an app I'm trying to change description and amount and add a note, but every time I try I get an error:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
My code:
import React from "react";
import { useParams } from "react-router-dom";
import { connect } from 'react-redux'
import ExpenseForm from "./ExpenseForm";
import { editExpense } from "../actions/expenses";
import { useNavigate } from "react-router-dom";
const EditExpensePage = (props) => {
const navigate = useNavigate();
return (
<div>
<ExpenseForm
expense ={props.expense}
onSubmit={(expense) => {
props.dispatch(editExpense(props.expense.id, expense))
navigate('/')
}}
/>
</div>
)
}
const mapStateToProps = (state) => {
const params = useParams()
return {
expense: state.expenses.find((expense) => expense.id === params.id)
}
}
export default connect(mapStateToProps)(EditExpensePage)
As it is saying above, you can use a hook only inside a functional component. In your code you are calling useParams inside mapStateToProps that is not a functional component. I would suggest you not to use mapStateToProps as it is deprecated now and works only with class base components. I suggest you to use new syntax of react-redux that is completely based on hooks. You can learn its documentation here https://redux.js.org/
Why do you want to connect when the component is already a function component?
import React from "react";
import { useParams } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux'
import ExpenseForm from "./ExpenseForm";
import { editExpense } from "../actions/expenses";
import { useNavigate } from "react-router-dom";
const EditExpensePage = (props) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const params = useParams()
const expenses = useSelector(state => state.expenses);
const expense = expenses.find((expense) => expense.id === params.id)
return (
<div>
<ExpenseForm
expense={expense}
onSubmit={(exp) => {
dispatch(editExpense(expense.id, exp))
navigate('/')
}}
/>
</div>
)
}
export default EditExpensePage