I can't handle resize and transform with jquery

Question

var menuOpen = true;
function MenuOpenClose(){
  console.log($("#left-bar").width());
  if(menuOpen){
    $("#left-bar").css("transform", "translateX(" + $("#left-bar").width() * -1 + ")");
    $("#body").css("width", "100vw");
    console.log("menu was closed");
    menuOpen = false;
  }
  else{
    $("#left-bar").css("transform", "translateX(0px)");
    $("#body").css("width", "calc(100vw -" + $("#left-bar").width() + ")");
    console.log("menu was open");
    menuOpen = true;
  }
}

This is my function, when menuOpen I can resize the #body div, but cannot transform the #left-bar. When the menuOpen is false I can't do both of them. What's wrong with code? Btw I use reactjs.

I can get the width in console, but can't resize them.