0
183
Viewsis this the right way to call a fuction and `<Link to ='/orderCP/orderCompletedCP' /> ` to change route
when i submit the form it wont go to the next route and I'm not sure about if this the right way to call loadUser function that I wrote on the app.js file and I call it here
function OrderCP(props) {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [mobileNumber, setMobileNumber] = useState('');
const [adress, setAddress] = useState('');
const [city, setCity] = useState('');
const [size, setSize] = useState('');
const [quantity, setQuantity] = useState('1');
function onOrderSubmit () {
fetch('http://localhost:3000/orderCP', {
method: 'post',
mode: 'cors',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
firstname: firstName,
lastname:lastName,
email: email,
mobilenumber: mobileNumber,
adress: adress,
city: city,
size:size,
quantity: quantity
})
})
.then(response => response.json())
.then(user => {
if (user.id) {
return (
this.props.loadUser(user),
<Link to ='/orderCP/orderCompletedCP' /> )
}
})
}
·
Juan Pablo Isaza
1 answers
Answer question0
Issues
- This is a function component, so
thisis simply undefined, just reference thepropargument directly. - The
Linkis a React component, it needs to be rendered into the DOM and interacted with. You should issue an imperative navigation (vs declarative with rendered components).
Solution
If using the current react-router-dom, version 6, then use the useNavigate hook to access a navigate function, otherwise if still on version 5, use the useHistory hook to access a history object.
import {
...
useHistory, // RRDv5
useNavigate, // RRDv6
...
} from 'react-router-dom';
...
function OrderCP(props) {
const history = useHistory(); // RRDv5
const navigate = useNavigate(); // RRDv6
... state declarations ...
function onOrderSubmit() {
fetch('http://localhost:3000/orderCP', {
method: 'post',
...
})
.then(response => response.json())
.then(user => {
if (user.id) {
props.loadUser(user);
history.push('/orderCP/orderCompletedCP'); // RRDv5
navigate('/orderCP/orderCompletedCP'); // RRDv6
}
});
}
...
}
·
Juan Pablo Isaza
Report
Answer question