How can I send two values with Axios in React JS? - reactjs

Question

I am trying to send a comment to my API. This comment is related to an article. So the three values I need to send are the user name, the content of the comment and the post the comment is related to.
A the moment I just succeeded sending the user name and the content to my API, but it didn't send the post the comment was related to.
Here is what I tried :
import React, { useState } from 'react'
import { useParams } from 'react-router-dom'
import TextField from '#material-ui/core/TextField';
import { Button } from '#material-ui/core'
import CommentsAPI from '../../Services/CommentsAPI'
export default function CommentForm() {
const [comment, setComment] = useState({})
const {id_post} = useParams()
const handleSubmit = async (event) => {
event.preventDefault();
try {
CommentsAPI.create(JSON.parse(`{"data":{"id":${id_post}, "attributes":${JSON.stringify(comment)}}}`))
} catch (error) {
console.log(error)
}
}
const handleChange = (event) => {
const {name, value} = event.currentTarget
setComment({
...comment,
[name]: value
})
}
return (
<form onSubmit={handleSubmit}>
<div>
<TextField
id="pseudo"
label="Pseudo"
type="text"
onChange={handleChange}
name="pseudo"
/>
</div>
<div>
<TextField
id="comment"
label="Comment"
multiline
minRows={2}
onChange={handleChange}
name="content"
/>
</div>
<div>
<Button variant="contained" color="primary" type="submit">
Send
</Button>
</div>
</form>
)
}
import { URL_COMMENTS } from '../config'
import axios from 'axios'
function create(id_post, comment) {
return axios.post(URL_COMMENTS, id_post, comment)
}
const CommentsAPI = {
create
}
export default CommentsAPI

Answer 1

you probably want something like this:
import { URL_COMMENTS } from '../config'
import axios from 'axios'
export default function create(id_post, comment) {
const data = {
//pass your data here
userName : yourUserName,
comment : yourComment,
postRelated : post
}
//sending data through api call
axios.post(URL_COMMENTS, data).then((response)=>{
//here your function returns the data gotten from your api
return response.data;
})
}

Answer 2

It looks like your create(id_post, comment) function requires 2 arguments, while you're passing only one:
CommentsAPI.create(JSON.parse(`{"data":{"id":${id_post}, "attributes":${JSON.stringify(comment)}}}`))
Just try to pass two arguments, like so:
CommentsAPI.create(id_post, JSON.stringify(comment));
Also according to axios docs: https://axios-http.com/docs/api_intro
axios.post uses three arguments:
axios.post(url, data, config), so currently you are passing comment as config to axios. Config is not required argument.
Try this (data object should look like request body provided by your backend):
function create(id_post, comment) {
const data = {
id: id_post,
comment: comment,
};
return axios.post(URL_COMMENTS, data);
}