In the ReactTable I have the Aircraft column, which is editable but I do not want the value to be updated as it is now, but, when you click there is an autocomplete by code, and when selecting an Aircraft, the column Weight will load the automatic value.
The Table is called "aircraft" The data I want to call are: Code, Name and Capacity.
This is the code where I call the table, but I do not know how to make it work with autocomplete
componentWillMount =()=>{
this.getAeronave ()
}
//Aqui obtengo todas las aeronaves
getAeronave = async () => {
try {
const response = await getAll('aeronaves')
console.log(response.data)
this.setState({
status: "done",
aeronave: response.data
});
} catch (error) {
this.setState({
status: "error"
});
}
};
<ReactTable
contentEditable
collapseOnDataChange={false}
data={data}
itemsPerPage={20}
onKeyPress={this.handleKeyPress}
columns={[
{
Header: "Aeronave",
columns: [
{
Header: "Aeronave",
id: "aeronave",
accessor: flight => ({
arrival: flight.arrival.configuration.aeronave,
departure: flight.departure.configuration.aeronave
}),
width: 50,
className: "center",
Cell: row => (
<DobleRow
edit={row.original.status === 'open' ? true : false} fieldMode={fieldMode}
arrival={row.value.arrival}
departure={row.value.departure}
editcontentIn={e => this.props.editcontentIn("aeronave",
{
arrival_id: row.original.arrival._id,
flight_id: row.original._id,
body: {
configuration: {
aeronave: e.target.innerHTML
}
}
}
)}
/>
)
}
]
},
{
Header: "Peso",
columns: [
{
Header: "Peso",
id: "peso",
accessor: flight => ({
arrival: flight.arrival.configuration.peso,
departure: flight.departure.configuration.peso
}),
width: 50,
className: "center",
Cell: row => (
<DobleRow
edit={row.original.status === 'open' ? true : false} fieldMode={fieldMode}
arrival={row.value.arrival}
departure={row.value.departure}
editcontentIn={e => this.props.editcontentIn("peso",
{
arrival_id: row.original.arrival._id,
flight_id: row.original._id,
body: {
configuration: {
peso: e.target.innerHTML
}
}
}
)}
/>
)
}
]
},
]
}
/>