Im trying to set the value of each selectField in a dynamic way inside a table. Here is my code so far, the problem is when i change one selectField it changes all of them and i cannot figure out how to make it to work as expected, only updated the one selected
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';
const months = [];
for (let i = 1; i <= 12; i++) {
months.push(<MenuItem value={i} key={i} primaryText={`${i}`} />);
}
class Month extends Component {
handleMonth = (value) => {
this.setState({
month: value
});
};
render() {
return
<Table selectable={false}>
<TableHeader
displaySelectAll={false}
adjustForCheckbox={false}>
<TableRow>
<TableHeaderColumn>Meses</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false} >
{itemsMonths.map((row, index) => (
<TableRow key={row.id}>
<TableRowColumn>
<SelectField
value={this.state.month}
onChange={this.handleMonth}>
{months}
</SelectField>
</TableRowColumn>
</TableRow>
))}
</TableBody>
</Table>
}
Can someone help me ?
See Question&Answers more detail:os