[untitled]
1 pointsby moretti0 comments
const btn = document.createElement('button');
btn.className = 'btn red';
btn.onclick = function(event) {
if (this.classList.contains('red')) {
this.classList.remove('red');
this.classList.add('blue');
} else {
this.classList.remove('blue');
this.classList.add('red');
}
};
In React instead: class Button extends React.Component {
state = { color: 'red' }
handleChange = () => {
const color = this.state.color === 'red' ? 'blue' : 'red';
this.setState({ color });
}
render() {
return (<div>
<button
className=`btn ${this.state.color}`
</button>
</div>);
}
}
I find it simpler to understand, because render, given its state, describes exactly how the UI should be. const foo = ({ a = 2, b = 2, c = 3 } = {}) => a * b * c;
const dict = {b: 4, c: 6};
foo(); // 12
foo(dict); // 48