Skip to content

Commit

Permalink
Extracted the logic to update the <ColorSelector> React 'state' with …
Browse files Browse the repository at this point in the history
…new value for a color component into separate nested function 'updateStateForColor(...)', to DRY out the code.
  • Loading branch information
maratbn committed Aug 5, 2018
1 parent ce5f5ab commit 7682ec6
Showing 1 changed file with 16 additions and 21 deletions.
37 changes: 16 additions & 21 deletions webpack_in/entry.jsx
Expand Up @@ -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 = {
Expand All @@ -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>
Expand Down

0 comments on commit 7682ec6

Please sign in to comment.