I have a simple sidebar where I use transitions for opening/closing the sidebar.
The transitions work when I call my Sidebar component as a function (sidebar 1 in example).
The transitions don't work when I use the Sidebar component as a component (sidebar 2 in example).
Why don't they work in example 2?
const App = (props) => {
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
const Sidebar = ({ bg, ...props }) => {
const width = sidebarCollapsed ? "0px" : "200px";
return (
<div
style={{
backgroundColor: bg,
height: "100px",
width: width,
transitionDuration: "500ms"
}}
/>
);
};
return (
<div>
<div>
{/* Sidebar 1 -> function */}
{Sidebar({ bg: "blue" })}
{/* Sidebar 2 -> component */}
<Sidebar bg="red" />
<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)}>
Toggle sidebar
</button>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>