Permalink
Browse files

Extracted the logic to update the <ColorSelector> React 'state' with …

…new value for a color component into separate nested function 'updateStateForColor(...)', to DRY out the code.
  • Loading branch information...
maratbn committed Jul 2, 2018
1 parent ce5f5ab commit 7682ec689ac957c80e2feeb1e33f8bef39b6e4a2
Showing with 16 additions and 21 deletions.
  1. +16 −21 webpack_in/entry.jsx
@@ -303,6 +303,19 @@ class ColorSelector extends React.Component {
}
render() {
const updateStateForColor = (component, value) => {
const color = {
...this.state.color
};
color[component] = value;
this.setState({
...this.state,
color
});
};
const { color } = this.state;
const colorOpposite = {
@@ -323,35 +336,17 @@ class ColorSelector extends React.Component {
<div style={{ marginTop: '-1em'}}>
<ColorComponentEntry label="R" value={ this.state.color.r } onChangeValue={
(value) => {
this.setState({
...this.state,
color: {
...this.state.color,
r: value
}
});
updateStateForColor('r', value);
}
} />
<ColorComponentEntry label="G" value={ this.state.color.g } onChangeValue={
(value) => {
this.setState({
...this.state,
color: {
...this.state.color,
g: value
}
});
updateStateForColor('g', value);
}
} />
<ColorComponentEntry label="B" value={ this.state.color.b } onChangeValue={
(value) => {
this.setState({
...this.state,
color: {
...this.state.color,
b: value
}
});
updateStateForColor('b', value);
}
} />
</div>

0 comments on commit 7682ec6

Please sign in to comment.