i have a button the manage the appearance of a component on the page. It works perfectly on desktop but in tablet or mobile nothing works, useState seems to not been able to update the state.
Can someone explain to me why such thing would happen?

Please see code snippet for reference. component I am referring is contact at the bottom of the code snippet, Thanks.

const Conciergerie = () => {
  const scrollToConciergerie = () => {
    window.scrollTo({
      top: 1200,
      behavior: "smooth",
    });
  };
  const [showform, setshowform] = useState(false);
  useEffect(() => {
    window.addEventListener("load", scrollToConciergerie);
    return () => {
      window.removeEventListener("load", scrollToConciergerie);
     
    }
  });

  return (
    <div className="section" onl oad={scrollToConciergerie}>
      <div className="container">
        <div className="text-center">
          <h1 className=" my-4 text-capitalize" id="conciergerie">
            Conciergerie
          </h1>
        </div>
        <h3 className="text-capitalize concierge-subheading mt-3">
          ¿QUÉ NECESITAS?
        </h3>
        <p className="lead concierge-subheading-text">

        </p>
      </div>
      <div className="container">
        <div className="row text-center mt-5">
          {conciergerieData.map((item) => {
            return (
              <div className="col-md-4" key={item.id}>
                <span className="fa-stack fa-4x">
                  <Image
                    layout="fill"
                    src={item.icon}
                    alt=""
                    className="svg-inline--fa fa-solid  fa-stack-1x fa-inverse"
                    aria-hidden="true"
                    focusable="false"
                    data-prefix="fas"
                    data-icon="house"
                    role="img"
                  />
                </span>
                <h4 className="my-3 text-hogar2 text-uppercase">
                  {item.title}
                </h4>
                <ul>
                  {item.text.map((text) => {
                    return (
                      <li key={text.id} className="list-unstyled">
                        <p className="m-0 text-muted text-list">
                          {text.content}
                        </p>
                      </li>
                    );
                  })}
                </ul>

                {item.id === "algomas" ? (
                  <AiOutlinePlus
                    onClick={() => {
                      setshowform( !showform)
                      console.log(showform)
                    }}
                    className="fs-2"
                    fill="#5ab4ab"
                  />
                ) : null}
              </div>
            );
          })}
        </div>
      </div>
      <div className={showform ?"algoma" : "d-none"}>
       <Contact />
      </div>
    </div>
  );
};

export default Conciergerie;

CodePudding user response：

I believe hooks was introduced in React 16.8, and I see you're referencing React 16.6.3. I may be wrong, but is there a reason why you use an old version of React?

Then, I am not sure you get the wanted result from your useEffect. There is no dependency array supplied, which means your effect will run on every single render. Is that your intention?

const [showform, setshowform] = useState(false);

const scrollToConciergerie = useCallback(() => {
  window.scrollTo({
    top: 1200,
    behavior: "smooth",
  });
}, []);

useEffect(() => {
  window.addEventListener("load", scrollToConciergerie);
  return () => {
    window.removeEventListener("load", scrollToConciergerie);
    
  }
}, [scrollToConciergerie]);

This will ensure that the effect is run only when the component mounts, and will remove the event listener on unmount.

Since your question is about state not working as expected, I spotted something that just might be the cause. Not sure though, but it would be worth a try.

When you want to toggle a boolean value in state, you can supply a function to setState, like this:

setshowform(currentValue => !currentValue)

I am not sure any of my suggestions will solve your problem, but you can try them if you want.

CodePudding user response：

To fix it i had to create a second useeffect and function call showcontactForm as below

  const showContactForm = () => {
    setshowform(!showform)
    
  }
  useEffect(() => {
    window.addEventListener("click",showContactForm );
    
    return () => {
      window.removeEventListener("click", showContactForm);
      
    }
  
    
  })