My goal here is similar to what is demonstrated in this Stack Overflow thread about transitioning flex-grow of items in a flexbox
I'm curious how this can be achieved with React. Consider the following code:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
classNameToUse: ''
};
this.onElementClicked = this.onElementClicked.bind(this);
}
onElementClicked() {
this.setState({ classNameToUse : 'big-size'})
}
render() {
return (
<div>
<div className={this.state.classNameToUse} onClick={this.onElementClicked} >
something
</div>
<div className={this.state.classNameToUse onClick={this.onElementClicked} >
something else
</div>
</div>
);
}
}
In this setup, adding the className affects both elements. However, I aim to make one grow big with animation while the other collapses, regardless of the number of elements present.