Im following tutorial on udemy and facing critical problem, what is stopping me from further coding....
There is no typeo... I have copied sourcecode. Im having problem with selecting payment method... Im 100% sure is about "type=radio" I just cant select it, and by pressing Continue - error above error is occurring..
TypeError: history.push is not a function
submitHandler
20 | const submitHandler = (e) => {
21 | e.preventDefault()
22 | dispatch(savePaymentMethod(paymentMethod))
> 23 | history.push('/placeorder')
| ^ 24 | }
25 |
26 | return (
function PaymentScreen(history) {
const cart = useSelector(state => state.cart)
const { shippingAddress } = cart
const dispatch = useDispatch()
const [paymentMethod,setPaymentMethod] = useState('paypal')
if(!shippingAddress.address ) {
history.push('shipping')
}
const submitHandler = (e) => {
e.preventDefault()
dispatch(savePaymentMethod(paymentMethod))
history.push('/placeorder')
}
return (
<FormContainer>
<CheckoutSteps step1 step2 step3 />
<Form onSubmit={submitHandler}>
<Form.Group>
<Form.Label as='legend'>Select Method</Form.Label>
<Col>
<Form.Check
type='radio'
label='PayPal or Credit Card'
id='PayPal'
name='paymentMethod'
checked
onChange={(e) => setPaymentMethod(e.target.value)}
>
</Form.Check>
</Col>
</Form.Group>
<Button type='submit' variant='primary'>
Continue
</Button>
</Form>
</FormContainer>
)
}
Im not having problem with redirecting(History) im having problem with selecting payment option "type= radio"i triend witch 'type=check' and cant make 'tick' in there, it gives little square text field. Im using old router as it was the only way to get through tutorial... Im using same history method for other steps of my payment and it all works... and because I can't select Payment method then later on i cant do checkout because of missing dictionary going to backend...
You need to import the useHistory hook from react-router-dom: https://v5.reactrouter.com/web/api/Hooks
Example:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
This is because you are using react router dom old version in old version to page the
history.push("/abc")
in new version of react router dom we use this
import React from "react";
import { useNavigate } from "react-router-dom";
const Exp = () => {
const navigate = useNavigate();
const ChangePage = () => {
navigate("/placeorder");
};
return <button onClick={ChangePage}>Change</button>;
};
export default Exp;
for more info vist the site