I have a table in ReactJS that displays an array of items. Each item has the following fields:
id,
requested_date, and
location
Additionally, there is another field called "date" which is located outside of the array. This "date" should always display the latest date from the array's requested_date.
The structure is as follows:
Item array
id requested_date location
101 2018-03-21 NY
102 2018-03-22 NY
103 2018-03-20 NYDate : 2018-03-22
In the example above, the Date should be set to "2018-03-22" because it is the latest requested_date in the items array.
Please see my code below for reference.
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 to implement a logic where the latest date is automatically updated when selecting a requested_date. It works fine for the first item, but for subsequent items, it does not update with the current selection. Instead, it uses the previous selection.
The problem can be described as follows:
The issue is not with the date comparison itself; that part works as expected. The problem lies in maintaining the correct values and updating them during the selection process. For example:
id requested_date location
101 2018-03-21 NY
102 2018-03-22 NY
103 2018-03-20 NYIf I make a change in the requested_date for the 102nd record, like this:
id requested_date location
101 2018-03-21 NY
102 2018-03-19 NY
103 2018-03-20 NYI would expect that the change to 2018-03-19 should happen immediately during the selection, and then compare it with the other requested_dates to set the latest date as 2018-03-21.
However, what actually happens is that it retains the old value of 2018-03-22, therefore the array element's requested_date does not change during the selection process.