**import React, { Component } from 'react'
import moment from 'moment'
import {Form, Formik, Field, ErrorMessage} from 'formik'
import TodoDataService from '../../api/todo/TodoDataService'
import AuthenticationService from './AuthenticationService'
class TodoComponent extends Component {
constructor(props){
super(props)
this.state = {
id:this.props.params.id,
description:'',
targetDate: moment(new Date()).format('YYYY-MM-DD')
}
this.onSubmit = this.onSubmit.bind(this);
this.validate = this.validate.bind(this);
}
componentDidMount(){
let username = AuthenticationService.getLoginUserName()
TodoDataService.retrieveTodo(username, this.state.id)
.then(response => this.setState({
description: response.data.description,
targetDate: moment(response.data.targetDate).format('YYYY-MM-DD')
}))
}
validate(values){
let error = {}
if(!values.description){
error.description = "Enter a Description"
}
else if(values.description.length<5){
error.description = "Enter atleast 5 Characters in Description"
}
if(!moment(values.targetDate).isValid()){
error.targetDate="Enter a valid date"
}
return error
}
onSubmit(values){
let username = AuthenticationService.getLoginUserName()
let todo={
id: this.state.id,
description:values.description,
targetDate:values.targetDate
}
console.log(values)
if(this.state.id === -1){
TodoDataService.createTodo(username, todo)
.then(()=> this.props.navigate('/todos'))
}else{
TodoDataService.updateTodo(username, this.state.id,
todo).then(() => this.props.navigate('/todos'))
}
}
render() {
let {description, targetDate} = this.state;
return (
<div>
<h1>Update Todo Form </h1>
<div className="container">
<Formik initialValues = {{description, targetDate}} onSubmit={this.onSubmit}
validateOnChange={false} validateOnBlur={false} validate={this.validate} enableReinitialize={true}>
{
(props) =>(
<Form>
<ErrorMessage name="description" component="div" className="alert alert-warning"/>
<ErrorMessage name="targetDate" component="div" className="alert alert-warning"/>
<fieldset className="form-group">
<label>Description</label>
<Field className="form-control" type="text" name="description"/>
</fieldset>
<fieldset className="form-group">
<label>Target Date</label>
<Field className="form-control" type="date" name="targetDate"/>
</fieldset>
<button className="btn btn-success" type="submit" >Save</button>
</Form>
)
}
</Formik>
</div>
</div>
)
}
}
export default TodoComponent;**
import React, { Component } from 'react';
import TodoDataService from '../../api/todo/TodoDataService';
import AuthenticationService from './AuthenticationService';
import moment from 'moment';
class ListTodoComponent extends Component{
constructor(props){
super(props);
this.state={
todos:[],
message:null
}
this.deleteTodoClicked = this.deleteTodoClicked.bind(this);
this.refreshTodos = this.refreshTodos.bind(this);
this.updateTodoClicked = this.updateTodoClicked.bind(this);
this.addTobeClicked = this.addTobeClicked.bind(this);
}
componentDidMount(){
this.refreshTodos();
}
addTobeClicked(){
this.props.navigate(`/todos/-1`)
}
deleteTodoClicked(id){
let username = AuthenticationService.getLoginUserName()
TodoDataService.deleteTodo(username, id)
.then( response =>{
this.setState({message:`Delete of todo id ${id} Successfull`})
this.refreshTodos()
})
}
refreshTodos(){
let username = AuthenticationService.getLoginUserName()
TodoDataService.retrieveAllTodos(username)
.then(
response => {
this.setState({todos:response.data})
}
)
}
updateTodoClicked(id){
console.log("updated");
this.props.navigate(`/todos/${id}`)
}
render(){
return (
<div>
<div className="container">
<h1>List of Todos</h1>
{this.state.message &&<div className="alert alert-success">{this.state.message}</div>}
<table className="table">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Is Completed?</th>
<th>Target Date</th>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
{
this.state.todos.map(
todo =>
<tr key={todo.id}>
<td>{todo.id}</td>
<td>{todo.description}</td>
<td>{String(todo.done)}</td>
<td>{moment(todo.targetDate).format('YYYY-MM-DD')}</td>
<td><button className="btn btn-warning" onClick={() => this.deleteTodoClicked(todo.id)}>Delete</button></td>
<td><button className="btn btn-success" onClick={() => this.updateTodoClicked(todo.id)}>Update</button></td>
</tr>
)
}
</tbody>
</table>
<div className="row">
<button className="btn btn-success" onClick={this.addTobeClicked}>Add Todo</button>
</div>
</div>
</div>
)
}
}
export default ListTodoComponent
When I try to add date but date remain same date but in console it shows the new added date why new added date don't show in screen. When I try to add date but date remain same date but in console it shows the new added date why new added date don't show in screen. When I try to add date but date remain same date but in console it shows the new added date why new added date don't show in screen.