I have a table in reactJS with array of items into that table with the following fields
id,
requested_date &
location
and also i have one more field, which is a date field. so, in the items array i may have one or more items with different requested_date.
But in that date field ( which is outside of the array ) should have the latest date out of the array of requested_date.
Structure as follows
Item array
id requested_date location
101 2018-03-21 NY
102 2018-03-22 NY
103 2018-03-20 NY
Date : 2018-03-22
In the above structure Date : 2018-03-22 because 2018-03-22 is the latest requested_date from the items array.
Please find my code below.
class Details extends React.Component {
constructor(props) {
super(props);
this.requestedDateChangeonSelectionEvent=this.requestedDateChangeonSelectionEvent.bind(this);
this.state = { item: props.item };
}
requestedDateChangeonSelectionEvent(dateSelected)
{
var item = this.state.item;
var lines = item.order_items;
if(lines.length == 1)
{
var latest = dateSelected;
console.log("Length 1");
}
else {
var latest = dateSelected;
for(var i=0;i<lines.length;i++) {
if(moment(lines[i].requested_date) >= moment(latest)) {
latest=lines[i].requested_ship_date;
}
}
}
this.state.item.date=latest;
this.setState({ item: item });
}
render() {
return (<tbody>{ this.props.items.map((item) => <DetailsItem key={ item.line_id } item={ item }
requestedDateChangeonSelectionEvent={ this.props.requestedDateChangeonSelectionEvent }
/>) }
</tbody>);
}
}
class DetailsItem extends React.Component {
constructor(props) {
super(props);
this.handleRequestedShipDate = this.handleRequestedShipDate.bind(this);
}
handleRequestedShipDate(e)
{
var item=this.state.item;
this.setState({item:item});
var charCode = (e.which) ? e.which : e.keyCode;
var dateSelected=e.target.value;
e.preventDefault();
this.props.requestedDateChangeonSelectionEvent(dateSelected);
}
render() {
return (
<tr>
<td><input name="line_number" type="text" value={ this.state.item.line_number } onChange={ his.handleInputChange }/> </td>
<td><input name="requested_date" type="date" value={ this.state.item.requested_date } onChange={ (e) => { this.handleRequestedShipDate(e); this.handleInputChange(e); } } </td>
<td><input name="source_location" type="text" value={ this.state.item.source_location } onChange={ this.handleInputChange }/> </td>
</tr>
);
}
}
I am trying logic like., while do the selection of requested_date itself it should find the latest date and update in the Date field.
While I am selecting request_date for the very first item its works fine, but when I am selecting for the 2nd and 3rd items, it is not finding with the current selection request_date, its go with my previous selection.
Problem in detail :
There is not problem with date comparison. Its happening as per expected. The problem is if i change any date value in the middle of the array or some where., its maintaining previous values and doing the comparison with old value itself. Change is not happening during data selection itself. For example.,
id requested_date location
101 2018-03-21 NY
102 2018-03-22 NY
103 2018-03-20 NY
Now if i do any change in 102 record like.,
id requested_date location
101 2018-03-21 NY
102 2018-03-19 NY
103 2018-03-20 NY
am expecting that 2018-03-19 change should happen during selection itself and should compare with other requested_date and should change the latest date to 2018-03--21.
But, its not happening rather, its maintaining old value2018-03-22 this value is not changing for that array element during date selection.
