I'm creating a comment section for my website, What its supposed to do is I type the comment in the textbox, I send the input into the database which inserts it into a table, then I retrieve the data from the table, turn it into a string, and send it to the frontend where it'll be displayed below the textbox.
But the comment won't show up. I don't know if I'm doing something wrong, Is there any way you can help me with this?
this is my backend program
app.post('/forum', function (req, res){
const queryString = "INSERT INTO comments (Comments) VALUES (?)"
console.log (req.body)
con.query(queryString, [req.body.comment], function (err, result){
if (err) {
throw err;
}
if (result.length != 1) {
return res.send("Posted Comment")
}
else {
res.send('Comment failed to post')
};
})
})
app.get('/forum', function (req, res){
const queryString = 'SELECT * FROM comments WHERE Comments = ?'
console.log (req.body)
con.query(queryString, [req.body.insert], function (err, result){
if (err) {throw err;}
var commenting = JSON.stringify(result)
res.send(commenting);
})
})
the api call that retrieves the response
static async forum(comm){
const response = await axios
.post('http://localhost:8080/forum', {
comment: comm,
})
.then ()
return response.data;
}
static async comment(comm){
const response = await axios
.get('http://localhost:8080/forum', {
comment: comm
})
.then ()
return response.data;
}
and my frontend where the comment would show up
function Forum() {
const [comment, inputComment] = useState ('')
/*user posts the comment*/
const onPost = (event) => {
event.preventDefault()
apiClient.forum(comment) .then( (response) => {
console.log(response)
})
}
/*users comment gets displayed*/
apiClient.comment() .then((response) =>{
document.getElementById("comment-section").innerHTML = response
})
return (
<section class = "index-banner" >
<div>
<label>Comment</label>
<textarea name="comment" id= "comment" rows="10" tabIndex = "4"onChange = {e => {inputComment(e.target.value)}}></textarea>
<button onClick={onPost}>Post</button>
</div>
<div>
<body id = "comment-section" ></body>
</div>
</section>
)
}
