Why does this CSS transition only work when used as a function instead of a component?-CodePudding

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>

CodePudding user response：

That is how the React DOM is working, if you want to animate it, you have to pass the prop of the open. When you are trying to pass a state from one component to another, you should always do it throught the props.

 const Sidebar = ({ bg, open, ...props }) => {
    const width = open  ? "0px" : "200px";

    return (
      <div
        style={{
          backgroundColor: bg,
          height: "100px",
          width: width,
          transitionDuration: "500ms"
        }}
      />
    );
  };
const App = (props) => {
  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);



  return (
    <div>
      <div>
        {/* Sidebar 1 -> function */}
        {Sidebar({ bg: "blue", open: sidebarCollapsed })}

        {/* Sidebar 2 -> component */}
        <Sidebar bg="red" open={sidebarCollapsed}/>

        <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>