React state vs props for complex structure - api

Question

I did example where my react fetches data from API.
I have the following mockup
List of objects
-- Object
--- Select field
this is my OrdersList.jsx
import React from 'react';
import Order from './Order';
class OrdersList extends React.Component {
constructor(props) {
super(props)
this.state = { data: [] }
}
componentDidMount() {
$.ajax({
url: '/api/v1/orders',
success: data => this.setState({ data: data }),
error: error => console.log(error)
})
}
render() {
return (
<div className="row">
<div className="col s12">
<table className="floatThead bordered highlight">
<thead>
<tr>
<th>id</th>
<th>status</th>
</tr>
</thead>
<Order data = { this.state.data } />
</table>
</div>
</div>
)
}
}
export default OrdersList;
here is my Order.jsx (it has Item to list and ItemStatus)
import React from 'react'
class OrderStatus extends React.Component {
constructor(props) {
super(props)
this.state = { data: [] }
}
handleChange(event) {
let data = {
order: {
status: event.target.value
}
}
console.log(event)
$.ajax({
method: 'PUT',
url: `/api/v1/orders/${event.target.id}`,
data: data,
success: data => (console.log(data), this.setState({ data: data })),
error: error => console.log(error)
})
}
render() {
return (
<div className="row">
<div className="input-field">
<p>status: {this.props.data.status}</p>
<select value={ this.props.data.status } id={ this.props.data.id } onChange={ this.handleChange } className="browser-default" >
<option value='neworder'>new</option>
<option value='pendingorder'>pending</option>
<option value='sentorder'>sent</option>
<option value='completedorder'>done</option>
</select>
</div>
</div>
)
}
}
class Order extends React.Component {
constructor(props) {
super(props)
this.state = { data: [] }
}
render() {
return (
<tbody>
{
this.props.data.map(
order =>
<tr key={order.id}>
<td>
# {order.id}
</td>
<td>
<OrderStatus data={ order } />
</td>
</tr>
)
}
</tbody>
)
}
}
export default Order;
What I am not able to understand is how to update my item status on ajax callback (there is update in backend, it works just fine, but how to update my status state on child item which is being listed by map function).. Appreciate for your input!

Answer 1

Your code looks fine, you are just missing a bind statement.
Add the following to your constructor and it should work:
this.handleChange = this.handleChange.bind(this);
For reference check this link.