Animate width of a div in React - reactjs

Question

I have a div whose content changes. Whenever the content changes, the div should animate its width. I tried the following and it does not work. Any pointers will be helpful.
class App extends React.Component {
constructor() {
super();
this.state = {
text: 'Hello world'
}
}
changeText() {
this.setState({
text: 'Very long text stretching across screen'
});
}
render() {
return <div>
<div className="text">{this.state.text}</div>
<button onClick={this.changeText.bind(this)}>Change</button>
</div>;
}
}
ReactDOM.render( < App / > , document.getElementById('root'));
.text {
display: inline-block;
background-color: cyan;
transition: width 2000s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

I could do it like this:
class App extends React.Component {
constructor() {
super();
this.state = {
text: 'Hello world'
}
this.myRef = React.createRef();
}
changeText() {
this.setState({
text: 'Very long text stretching across screen'
});
this.myRef.current.style.width = '250px';
}
render() {
return <div>
<div ref={this.myRef} className="text">{this.state.text}</div>
<button onClick={this.changeText.bind(this)}>Change</button>
</div>;
}
}
ReactDOM.render( < App / > , document.getElementById('root'));
.text {
display: inline-block;
background-color: cyan;
overflow: hidden;
height: 18px;
width: 80px;
transition: width 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

You can do this with your current code by specifying initial and final width and setting the style class dynamically based on button click.Please find code below:
https://codesandbox.io/s/fervent-dawn-32bfl
Also note that you have given the transition as "2000s" which is 2000 seconds :-)
Note: Marudhupandiyan's comment in your original question also provides a solution where the width is determined dynamically, which is a much more optimal solution if you don't know the width beforehand. You can integrate that logic into the code I have provided above, if required.