Hiding the element Responsively in React

Question

I am using Reactstrap ,and want to hide my input element when the device is mobile.I used the className same as We use in bootstrap,but the className is not working at all.Is there any way to do it similarly as bootstrap in reactstap ?

 <input className="d-sm-none d-md-block" type="text"placeholder="Search"/>

I tried the above code to hide it but it is not working,is there any way to do so?

Answer 1

In a parent component where input is being rendered;

This is assuming you have functional react component. Same logic can be applied for Class components.

  useEffect(() => {

    setDeviceWidth(window.innerWidth);

  const setDeviceWidth = width => {
    if (width < 767) {
      return setDevice("mobile");
    } else if (width > 767 && width < 1280) {
      return setDevice("tablet");
    }
    return setDevice("desktop");
  };

  }, []);

Manage state

const [device,setDevice]=useState("")

Conditionally render the input

{device==="mobile"?null:<input/>}