I'm trying to hide a div using the following method in a react web page. But it doesn't hide the element. I can't see any errors in the developer tools as well.

if(pw.length==0){
  document.getElementById('pwMeter').style.display='none'  
}

What is the problem here? Does React support this method?

CodePudding user response：

yes with react you can do this , check this sample ref code for that

import { useState } from "react";

const TestFunction = (props) => {
  const [pw, setpw] = useState(["test"]);
  return (
    <div>
      <div
        id="pwMeter"
        style={pw && pw.length > 0 ? { display: "bock" } : { display: "none" }}
      >
        <p>test data</p>
      </div>
    </div>
  );
};

export default TestFunction;