I have recently learning react for front end development and have encountered the problem when using useStates. I tried to input a value in a textbox and submit it by clicking a submit button. Normally, only 1 response would be logged on the console, however it appeared twice.
Would be grateful if someone could spot where went wrong in my code snippet.
`
import './App.css';
import { Button } from 'react-bootstrap';
import { useState } from "react";
import axios from 'axios';
function App () {
const [key, setKey] = useState(null);
const [submit, setSubmit] = useState(false);
function getKey(val){
setKey({[val.target.name]: val.target.value})
}
{
console.log(key)
axios
.post('https://jsonplaceholder.typicode.com/posts', key)
.then(response => {
console.log(response)
})
}
return (
<>
<div className = "App">
<h1>Type in the keyword you wish to search: </h1>
<input
type = "text"
name = "keyword"
onChange = {getKey}
/>
<Button onClick = {() => setSubmit(true)} > Submit!</Button>
</div>
</>
);
}
export default App;
`