Currently, I am engaged in a basic project where I receive user input and store it in a database. Here is the code snippet:
const [dataFromDB, setDataFromDB] = useState(null);
const fetchDataFromDB = async () => {
try {
const response = await fetch(url);
const data = await response.json();
setDataFromDB(data);
console.log(data);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
fetchDataFromDB();
}, []);
const addTextToDB = async (text) => {
try {
await fetch('http://localhost:3001/api/codes', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: text,
}),
});
} catch (error) {
console.error(error);
}
};
const handleSubmit = (e) => {
e.preventDefault();
const input = e.target.elements.name.value;
addTextToDB(input);
e.target.reset();
fetchDataFromDB();
setDataFromDB(dataFromDB);
console.log(dataFromDB);
};
return (
<div className="App">
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="ADD" />
</form>
<div>
{dataFromDB &&
dataFromDB.map((item) => <Item key={item._id} name={item.text} />)}
</div>
</div>
);
}
Initially, I fetch the data to display the database content to the user. When a user enters some text and submits by clicking a button, the input will be added to the db. However, to view the changes, I have to refresh the page or enter multiple inputs consecutively.
I am unsure where the issue lies. After submitting the data, I fetch the updated information from the database to reflect the changes made. Subsequently, I update the state using setDataFromDB to visualize the modifications.