javascriptreactjsreact-domreact-big-calendar

react-big-calendar not rendering anything inside other components

I'm trying to create some application with react-big-calender, but I'm facing some weird behavior of it. If I wrap it inside any other component other than directly rendering it, it doesn't show anything at all.

const App = () => {
  return (
    <div>
      <Cal />
    </div>
  );
};

ReactDOM.render(<Cal />, document.getElementById("root")); //<- works
ReactDOM.render(<App />, document.getElementById("root")); //<- works, but doesn't show anything

And that Cal module is defined as it was defined in their example

Here is my codesandbox

Solution

  • This problem is not related with react-big-calender, its the problem of CSS.

    Try

    <div style={{ width: "100%", height: "100%" }}>
  <Cal />
</div>