How to send a fetch post request from react component to backend - reactjs

Question

I want to send the fetch post request to the server from react class component. I never did fetch post. So how can I do this from that component using thunk.
class Add extends Component {
constructor(props) {
super(props);
this.state = {username: '', email:'', text:''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert (JSON.stringify(this.state))
event.preventDefault();
}
render(){
return (
<div className="addcontainer">
<div style={{display: 'flex', justifyContent: 'center'}}>
<h4>Add new task here:</h4>
</div>
<form onSubmit={this.handleSubmit}>
<div className="wrapper">
<label for="username"><b>Username</b></label>
<input type="text" value={this.state.username} onChange={e => this.setState({ username: e.target.value })} placeholder="Enter Username" name="uname" required />
<label for="email"><b>Email</b></label>
<input type="text" value={this.state.password} onChange={e => this.setState({ email: e.target.value })} placeholder="Enter Email" name="email" required />
<label for="text"><b>Text</b></label>
<input type="text" value={this.state.password} onChange={e => this.setState({ text: e.target.value })} placeholder="Enter Task" name="text" required />
<button className="login" type="submit">Add task</button>
</div>
</form>
</div>
)
}
}
I also have an example of the jquery ajax request in documentation, but it is of little help to me. Please help me to write thunk with fetch
$(document).ready(function() {
var form = new FormData();
form.append("username", "Example");
form.append("email", "example#example.com");
form.append("text", "Some text");
$.ajax({
url: 'https://uxcandy.com/~shapoval/test-task-backend/create?developer=Example',
crossDomain: true,
method: 'POST',
mimeType: "multipart/form-data",
contentType: false,
processData: false,
data: form,
dataType: "json",
success: function(data) {
console.log(data);
}
});
});
Here is thunk that works with fetch get:
const getRepos = username => async dispatch => {
try {
var url = `https://uxcandy.com/~shapoval/test-task-backend/?developer=sait&sort_field=${username}`;
const response = await fetch(url);
const responseBody = await response.json();
//console.log(responseBody.message.tasks);
dispatch(addRepos(responseBody.message.tasks));
} catch (error) {
console.error(error);
dispatch(clearRepos());
}
};

Answer 1

You can use second argument of fetch function to add options e.g.
fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
For more information please refer here
other effective way to make api hit is by using axios