cord, try this code:
import React, { Component } from "react";
export default class Main extends Component {
constructor() {
super();
const date = new Date();
const newDate =
date.getFullYear() +
"-" +
("0" + (date.getMonth() + 1)) +
"-" +
("0" + date.getDate());
this.state = {
startDate: newDate,
endDate: newDate
};
}
setDate = ({ target: { name, value } }) => {
this.setState({
[name]: value
});
};
render() {
const { endDate, startDate } = this.state;
console.log(this.state);
return (
<>
<label>From</label>
<input
type="date"
name="startDate"
value={startDate}
onChange={this.setDate}
/>
<label>To</label>
<input
type="date"
name="endDate"
value={endDate}
onChange={this.setDate}
/>
</>
);
}
}
It's cleaner with a generic method that manages your date changes. I also felt free to refactor it a bit. Let me know if it works the way you wanted it to.
It seems the case is wrong. I cleaned up the code.
startdate to startDate
enddate to endDate. It seems to work well if you change this part.
import React, { Component } from "react";
export default class Datepage extends Component {
constructor() {
super();
var date = new Date();
var newdate =
date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)) + "-" + date.getDate();
this.state = {
startdate: newdate,
enddate: newdate,
clicked: false
};
}
componentDidMount() {
}
setDate = (e) => {
this.setState({
[e.target.name]: e.target.value
});
};
render() {
return (
<div>
<label>From</label>
<input
type="date"
name="startdate"
value={this.state.startdate}
onChange={this.setDate.bind(this)}
/>
<label>To</label>
<input
type="date"
name="enddate"
value={this.state.enddate}
onChange={this.setDate.bind(this)}
/>
</div>
);
}
}
