Inputs not changing when removing list items from state - reactjs

Question

I made a simple class that shows a list that you can add or remove li items into state. However, these li items contains input boxes.
Let's say there are 3 li items with 3 input boxes in it. You type something into first list item's input box, then you want to remove that li which contains your filled input.
Even if my index is correct react removes always the last item or I thought it removes the last item, maybe it removes the exact one with the correct index but preserves inputs' values. how can I fix this thing?
class DataTable extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{product: 'a', quantity: 0, price: 0},
],
};
}
render() {
if (!this.props.isOpen) {
return false;
}
const items = this.state.data.map((key, i) => {
return (
<li key={i}>
<input name="text" defaultValue={key.product}/>
<buttun className="btn" onClick={this.removeItem.bind(this, i)}/>
</li>
)
})
return (
<div>
<button className="btn" onClick={this.addItem.bind(this)}>Add Product</button>
<ul>
{items}
</ul>
</div>
)
}
addItem() {
const newState = update(this.state.data, {
$push: [{product: '', quantity: 0, price: 0}]
});
this.setState({
data: newState
})
}
removeItem(index) {
const newArray = update(this.state.data, {
$splice: [[index, 1]]
});
this.setState({
data: newArray
})
}
}
export default DataTable

Answer 1

Don't know if this is your problem but you are using the index of data as the key. This is only fine to do so when you don't modify the collection. Key must stay constant throughout, what's happening is that you remove an item and add another one and React thinks that input is the other one because it's key has changed.
constructor(props) {
super(props);
this.state = {
data: [
{product: 'a', quantity: 0, price: 0},
],
};
this.dataKey = 0;
render() {
if (!this.props.isOpen) {
return false;
}
const items = this.state.data.map((value) => {
return (
<li key={value.key}>
<input name="text" defaultValue={value.product}/>
<buttun className="btn" onClick={this.removeItem.bind(this, i)}/>
</li>
)
})
return (
<div>
<button className="btn" onClick={this.addItem.bind(this)}>Add Product</button>
<ul>
{items}
</ul>
</div>
)
addItem() {
const newState = update(this.state.data, {
$push: [{product: '', quantity: 0, price: 0, key: this.dataKey++}]
});
this.setState({
data: newState
})
}
removeItem(index) {
const newArray = update(this.state.data, {
$splice: [[index, 1]]
});
this.setState({
data: newArray
})
}
}
It just has to be something that is unique and constant. An Id for example would be good for this. https://facebook.github.io/react/docs/lists-and-keys.html