I am creating a CRUD application using reactjs and nodejs I have a function that is invoked when user presses button. I want this function ti send data to the pseudo database.
When you say your are a beginner…how much of a beginner are you? What have you built before?
I’ve worked through a fair portion of the Mongo University (free) course in the past, and found it good at providing all the information necessary to build CRUD apps. They do not focus on React, though, just the backend side of things, if I recall correctly.
What you ask can easily be accomplished by sending a post request to your backend.
(I generally use axios as a wrapper to perform a request, but you can use whatever method you prefer, the logic will still be the same.
Just let your react app make a post request and pass the relevant data as:
//react component
onSubmitData() {
axios.post('yourURL/endpoint', dataToPass)
.then((response) => // do something with the response if you want)
.catch((err) => // do something else if we got error)
}
Then simply instruct your node server to listen to post request on that endpoint specified as:
//node server
// assuming that we are already parsing the body request
app.post('/endpoint', (req, res) => {
// here you can grab the data in the request, perform your action (eg save them into a DB)
// then perform a response with either success or error for the frontend to listen
const data = req.body.dataToPass;
res.send(`your data is ${data}`)
})
Hope it helps 
p.s. if your app grows a lot you may want to consider an API to easier manage the logic.
Thank you, i will look at those. really thank you for your reply
i couldnt get a proper understanding of “how to call from database”. I tried coding in different ways and was unable to move forward.
As I have already suggested to you, show us your code (github repo is fine if it’s complicated), or parts of a demo (codepen / heroku / glitch).
It helps others to help you if you provide as much detail as possible. What technologies are you using? Is this a Mongo database, or an SQL based one?
There are lots of ways to create a CRUD app depending on your tech choices, and without knowing what you have tried, we can’t know what information will help you aside from saying ‘read the mongo / MySQL / whatever docs’
Also, since this is related to your last post, please add follow up questions to it so new comers to the question have all the context provided in earlier conversations.
I just merged this with your previous thread, and retitled it for clarity, given the scope of your questions.
I am building a simple crud application using nodejs and reactjs, and facing some issues in the delete part. when i press the delete button, the data from Json database has to get deleted. i tried many codes but couldnt resolve it. Any valuable suggestions will be very useful.
this is the code for client side and server side i had written, the delete part of code has some issue
class User extends Component {
delete(event) {
fetch('/user', {
method: 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstname: this.state.firstname,
lastname: this.state.lastname,
})
}).then((response) => response.json())
.then((responseJson) => {
this.setState({
showUsers: false,
users: responseJson
});
return;
})
.catch((error) => {
throw (error);
});
event.preventDefault();
}
render() {
return ( <
div className = "User" >
First Name: {
this.props.firstname
} < hr / >
Last Name: {
this.props.lastname
} < hr / >
<
button onClick = {
this.getUsers
}
className = "button-primary" > EDIT < /button> <
button onClick = {
this.delete.bind(this)
}
className = "button-
danger ">DELETE</button> <
/div>
)
}
}
class User extends Component {
delete(event) {
fetch('/user', {
method: 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstname: this.state.firstname,
lastname: this.state.lastname,
})
}).then((response) => response.json())
.then((responseJson) => {
this.setState({
showUsers: false,
users: responseJson
});
return;
})
.catch((error) => {
throw (error);
});
event.preventDefault();
}
render() {
return ( <
div className = "User" >
First Name: {
this.props.firstname
} < hr / >
Last Name: {
this.props.lastname
} < hr / >
<
button onClick = {
this.getUsers
}
className = "button-primary" > EDIT < /button> <
button onClick = {
this.delete.bind(this)
}
className = "button-
danger ">DELETE</button> <
/div>
)
}
}
The following is server side program (Different Folder)
router.delete('/', (req, res) => {
db.delete(function(err, data) {
res.json(data)
});
});
Would be helpful to have some additional informations about errors you are receiving
Anyway just by the look at it I’m thinking that if you are receiving a cannot read property of 'undefined' or something similar is probably because you have to return the fetch promise as:
delete(event) {
return fetch( ....