React: Changing style on a div element via setter "deletes" the div-CodePudding

I have a div element that looks like an application window. I want the user to be able to press "Maximize" to maximize this window. My idea is to set the dimensions of the container-div to a variable, then changing the dimensions upon a button-press to take up the full screen.

I have tried to add this in several different ways, but all of the solutions effectively delete the contents. All that is left of the component is an empty without any styling.

Code supplied below. The windows are also draggable which is what most of the code is about.

What am I doing wrong?

import {useRef, useState } from "react";
import Draggable from "./hooks/draggable";

export function AppWindow() {
  // Initial width
  const [width, setWidth] = useState(400)


  // DraggableElement function interpreted from https://codesandbox.io/s/priceless-hoover-j4vpn?file=/src/index.js
  const DraggableElement = ({ dragElement, parentElement }) => {
    const dragRef = useRef(null);
    const dragRefParent = useRef(null);
    Draggable(dragRef, dragRefParent);

    return (
      <div
        ref={dragRefParent}
        className={"draggable-parent dialog"}
        style={{width: width}} // mutable width value
      >

        <div ref={dragRef} className="draggable-child">
          {dragElement}
        </div>
        {parentElement}
      </div>
    );
  };

  const MaximizeButton = (givenWidth) => {

      return (
        <button onClick={() => setWidth(givenWidth)} >MAXIMIZE</button>
      )
  }

  return (
    <DraggableElement
      dragElement={
        <div className="app-title">
          Application Title goes here
          <div className="app-topbar">
            <button onClick={() => setWidth(600)}>Maximize</button>
            <MaximizeButton givenWidth={600}/>
          </div>
        </div>
      }
      parentElement={
        <div>
          <div className="contents">
            Contents of the application here
          </div>
        </div>
      }
    ></DraggableElement>
  );
}

Thank you for your help.

CodePudding user response：

Should be:

const MaximizeButton = ({ givenWidth }) => {
  return (
    <button onClick={() => setWidth(givenWidth)} >MAXIMIZE</button>
  )
}

Components get props as object