where to insert my todo in reactJs using axios post request? - reactjs

Question

where to write axios post request to insert todo into database.If I write axios post request in componentDidUpdate() whenever click on checkbox for todo_completed status it will insert in database. duplicate record maintains fro true and false. i dont understand where to call post request in todoApp.jsx
Here is my Code
todoapp.jsx
var React = require('react');
var TodoSearch = require('TodoSearch');
var AddTodo = require('AddTodo');
var TodoList = require('TodoList');
var axios= require('axios');
var TodoApp=React.createClass({
getInitialState:function(){
return{
todo_completed:false,
strSearchText:'',
todos:[]
};
},
componentDidMount:function(){
var that=this;
axios.post('/displaytodo').then(function (response){
console.log("display");
var todos=response.data;
console.log(todos);
that.setState({
todos:response.data
});
}).catch(function (error){
console.log(error);
});
},
componentDidUpdate:function(){
var todo_text="";
var todo_completed="";
this.state.todos.forEach(function(todo){
todo_text= todo.todo_text;
todo_completed=todo.todo_completed;
});
//insert todo in database
axios.post('/addtodo',{
todo_text:todo_text,
todo_completed:todo_completed
}).then(function (response) {
console.log("data");
}).catch(function (error) {
console.log(error);
});
},
handleAddTodo:function(todo_text){
alert("new todo "+todo_text);
//insert query needed to add todo
this.setState({
todos:[
...this.state.todos,
{
todo_text:todo_text,
todo_completed:false
}
]
});
},
handleToggle:function(todo_id){
var updatedTodos=this.state.todos.map((todo)=>{
if(todo.todo_id===todo_id){
todo.todo_completed=!todo.todo_completed;
}
return todo;
});
//update query required for completed status
this.setState({
todos:updatedTodos
})
//alert(id);
},
handleSearch:function(boolShowCompleted,strSearchText){
this.setState({
boolShowCompleted:boolShowCompleted,
strSearchText:strSearchText.toLowerCase()
});
},
render:function(){
var urlValue = this.props.params.sessionValue;
console.log(urlValue);
var {todos}=this.state;
return(
<div>
{urlValue}
<TodoSearch onSearch={this.handleSearch}/>
<TodoList todos={todos} onToggle={this.handleToggle}/>
<AddTodo onAddTodo={this.handleAddTodo}/>
</div>
)
}
});
module.exports=TodoApp;
AddTodo.jsx
var AddTodo = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var strTodoText = this.refs.strTodoText.value;
if (strTodoText.length > 0) {
this.refs.strTodoText.value = '';
this.props.onAddTodo(strTodoText);
} else {
this.refs.strTodoText.focus();
}
},
render: function() {
return ( < div >
< form onSubmit = { this.handleSubmit } >
< input type = "text" ref = "strTodoText" / >
< button className = "button" > Add Todo < /button>
</form > Add todo.....
< /div>
)
}
});

Answer 1

You need to add an axios post request at two places,
In the handleAddTodo function, that gets called when the new todo is added. With this post request you need to insert a new entry into the table
In the handleToggle function, that gets called when you toggle the state of todo, With this post request you need to update the entry that already exist in your table