46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
import {Component} from 'react'
|
|
|
|
class CountryInput extends Component {
|
|
state = {
|
|
bands: []
|
|
};
|
|
render() {
|
|
let bandInputs = [];
|
|
for (let i = 0; i <= this.state.bands.length; i++) { // sic!
|
|
const id = `${this.props.country.code}/${i}`;
|
|
const value = this.state.bands[i] || "";
|
|
bandInputs[i] = <input key={i} id={id} value={value}
|
|
onChange={this.handleChange}
|
|
onBlur={this.handleBlur} />
|
|
}
|
|
|
|
return (
|
|
<tr key={this.props.country.code}>
|
|
<th> {this.props.country.name} </th>
|
|
<td> {bandInputs} </td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
handleChange = (e) => {
|
|
const id = e.target.id;
|
|
const i = +id.split("/")[1];
|
|
let newBands = [];
|
|
newBands[i] = e.target.value;
|
|
for (let j = 0; j < this.state.bands.length; j++) {
|
|
if (i !== j) {
|
|
newBands[j] = this.state.bands[j];
|
|
}
|
|
}
|
|
this.setState({bands: newBands});
|
|
}
|
|
|
|
handleBlur = (e) => {
|
|
console.log(e);
|
|
this.props.updateCountryBands(this.props.country.code, this.state.bands);
|
|
}
|
|
|
|
}
|
|
|
|
export {CountryInput};
|