Updating a div size based on props in react - reactjs

Question

I'm trying to implement a side nav bar like how it is shown on this website
https://adminlte.io/themes/AdminLTE/index2.html
Now I'm trying to basically emulate the expanded nav bar and mini navbar toggle. However, I'm having trouble updating the size of the navbar in react.
Here is my nav bar component
import React, { Component } from 'react';
class SideNavBar extends Component {
render() {
let sideBarStyle = {
'height': '100%',
'backgroundColor': 'lightblue',
'width': "80px",
'position': 'absolute',
'top': '0',
'left': '0'
}
setTimeout(() => {
sideBarStyle["width"] = "300px";
}, 1000)
return (
<div style={sideBarStyle}>
sidenavbar
</div>
);
}
}
export default SideNavBar;
I put a set timeout there just because I wanted to quickly test if it was possible to expand the div's width from a click event.
But I get the following error
TypeError: Cannot assign to read only property 'width' of object '#<Object>'
How do I go about updating an element's size based on click events?

Answer 1

Can you try below.
import React, { Component } from 'react';
class SideNavBar extends Component {
constructor(props){
super(props);
this.state = {
width : 80
}
}
componentDidMount(){
setTimeout(() => {
this.setState({
width: 300
})
}, 1000);
}
render() {
let sideBarStyle = {
'height': '100%',
'backgroundColor': 'lightblue',
'width': this.state.width,
'position': 'absolute',
'top': '0',
'left': '0'
}
return (
<div style={sideBarStyle}>
sidenavbar
</div>
);
}
}
export default SideNavBar;
One more thing you no need to specify px explicitly in React. Just no is enough. React will take care of px.