how to FETCH POST data from REACT FORM to MongoDB - node.js

Question

i want tp Fetch POST data into mongodb cluster from a REACT FORM ,
how to extract value of inputs by name and get them into the post method ?
because i used req.body.NAME ... but it does not work
class Formulaire extends Component {
constructor(props) {
super(props)
}
addProduct = () => {
fetch('http://localhost:2904/addproduct' , {
method : 'POST',
body : JSON.stringify({
image :req.body.image ,
name :req.body.name,
price : req.body.price
}),
headers : {
'Content-type' : 'application/json'
}
})
}
render() {
return (
<div className = "formualire">
<form onSubmit = {this.addProduct}>
<input type="text" name="image" /> <br/>
<input type="text" name="name" /> <br/>
<input type="number" name="price" /> <br/>
<button type="submit">Post</button>
</form>
</div>
);
}
}

Answer 1

import React from 'react'
import { useForm } from "react-hook-form";
import { withRouter } from 'react-router-dom';
function Formulaire(props) {
const { register, handleSubmit } = useForm();
const addProduct = (data) => {
fetch('http://localhost:2904/addproduct', {
method: 'POST',
body: JSON.stringify({
image: data.image,
name: data.name,
price: parseInt(data.price)
}),
headers: {
'Content-type': 'application/json'
}
})
}
const aa =(data) => {
console.log(parseInt(data.price))
}
return (
<div className="formualire">
<form onSubmit={handleSubmit(addProduct)}>
<input type="text" {...register('image', { required: true })} /> <br />
<input type="text" {...register('name', { required: true })} /> <br />
<input type="number" {...register('price', { required: true })} /> <br />
<input type="submit" />
</form>
</div>
);
}
export default Formulaire;