I have below dialog where wrapperRefPopup has width in percentage-

<BootstrapDialog
        style={{height:'auto', zIndex:500}}        
        aria-labelledby="customized-dialog-title"
        open={true}
      >        
        <IconButton
          aria-label="close"
          onClick={closeModal}
          sx={{
            position: 'absolute',
            right: 8,
            top: -5,
            color: (theme) => theme.palette.grey[500],
          }}
        >
          <CloseIcon fontSize="medium" style={{paddingTop:"0.5rem", paddingRight:'0.2rem', color:'#000'}} />
        </IconButton>
        <Typography component="div" sx={{
          minWidth: '45rem',
          marginLeft: '4rem',
          marginRight: '4rem',
          paddingTop: '1.5rem',
        }}>
    <div>
        
    <svg ref={svgColorCodeRefPopup} style={{width:"-webkit-fill-available"}}>
</svg>
    </div>
      <div
        ref={wrapperRefPopup}
        style={{ width: "100%", height: "12.5rem", marginBottom: "2rem" }}
      >
        
        <svg ref={svgRefPopup} style={{ width: "100%", height: "110%",marginTop:"0%" }}>
          <g className="x-axis" />
          <g className="y-axis" />
        </svg>
      </div>
      </Typography>
      </BootstrapDialog>

For chart purpose , I want to calculate width in useEffect , which I am trying to calculate through-

const svgRefPopup = useRef();
  const svgColorCodeRefPopup=useRef();  
  const wrapperRefPopup = useRef();

  useEffect(() => {  
    const svg = select(svgRefPopup.current);
    const svgColorCode=select(svgColorCodeRefPopup.current);
    
    const { width, height } = wrapperRefPopup.current?.getBoundingClientRect?.()||0;

    ...
    ...

},[]);

When I try to console log width and height , I get undefined.

How can I get the height and width of div within bootstrap dialog?

CodePudding user response：

The problem will be that your wrapperRefPopup.current becomes undefined initially and youre fallbacking to 0, reading 0.width/0.height is undefined. Normally refs should be accessable in first useEffect. This might have something to do with the dialog component. To insure your ref is set everytime I'd recommend to use useState instead of useRef and have it in the useEffect dep.

const [wrapperPopup, setWrapperPopup] = useState(null)

useEffect(() => {
 if(wrapperPopup) {
  const { widht, height } = wrapperPopup.getBoundingClientRect()
 }
}, [wrapperPopup])
...

<div ref={setWrapperPopup}>
...

}

CodePudding user response：

You can get the width and height via the useRef hook, like so:

// ...
const wrapperRefPopup = useRef();
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

useEffect(() => {
    if (wrapperRefPopup.current) {
        setWidth(wrapperRefPopup.current.clientWidth);
        setHeight(wrapperRefPopup.current.clientHeight);
    }
}, []);

// ...