How to change attributes in React?-CodePudding

Good afternoon. I've found great peace of code for my project. For states developer used data attribute manipulation in vanilla Javascript in order to change state. Could someone help to translate plain JS to React



 <div className='hero' data-nav="true">
    <main></main>

<header data-nav="true">
<nav>
  <div id="nav-links">
    <a className="nav-link" href="#">
      <h2 className="nav-link-label rubik-font">Home</h2>
      <img className="nav-link-image" src="https://images.unsplash.com/photo-1666091863721-54331a5db52d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
    </a>
    <a className="nav-link" href="#">
      <h2 className="nav-link-label rubik-font">Work</h2>
      <img className="nav-link-image" src="https://images.unsplash.com/photo-1666055642230-1595470b98fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=995&q=80" />
    </a>
    <a className="nav-link" href="#">
      <h2 className="nav-link-label rubik-font">About</h2>
      <img className="nav-link-image" src="https://images.unsplash.com/photo-1666005487638-61f45819c975?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
    </a>
    <a className="nav-link" href="#">
      <h2 className="nav-link-label rubik-font">Contact</h2>
      <img className="nav-link-image" src="https://images.unsplash.com/photo-1665910407771-bc84ad45676b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80" />
    </a>
    <a className="nav-link" href="#">
      <h2 className="nav-link-label rubik-font">Join Us</h2>
      <img className="nav-link-image" src="https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
    </a>
  </div>
</nav>
</header>



<button id="nav-toggle" type="button" onClick={toggleNav}>
  <i className="open fa-light fa-bars-staggered"></i>
  <i className="close fa-light fa-xmark-large"></i>
</button>
    </div>

JavaScript

const toggleNav = () => {
  document.body.dataset.nav = document.body.dataset.nav === "true" ? "false" : "true";
}

Part of CSS


.hero[data-nav="true"] > main {
  transform: translateY(-50%);
}

nav {
  height: 50vh;
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 1;
  overflow: hidden;
}


header[data-nav="true"] > nav > #nav-links {
  transform: translateY(0%) scale(1);
}

#nav-links > .nav-link {
  text-decoration: none;
}

Would love to hear clever solutions Thank you

I've tried the event approach

    const toggleNav = (event) => {
        event.target.setAttribute('data-nav', 'false')
    }

CodePudding user response：

You can accomplish this with a simple use of useState and passing the value dinamically into the data-someName value.

Here an example:

  const [isNav, setIsNav] = useState(false);

  const toggleNav = (event) => {
    setIsNav((prevVal) => !prevVal);
  };

  return (
    <header data-nav={isDataNav}>
      <button id="nav-toggle" type="button" onClick={toggleNav}>
        ...
      </button>

      <nav>...</nav>
    </header>
  );

Hope it help

CodePudding user response：

only difference is the html code writing in jsx format. the jsx code showing below:

function Component() {
  const toggleNav = (e) => {
    e.target.dataset.nav = e.target.dataset.nav === 'true' ? 'false' : 'true';
  }
  return <div className='hero' data-nav="true">
    <main></main>

    <header data-nav="true">
      <nav>
        <div id="nav-links">
          <a className="nav-link" href="#">
            <h2 className="nav-link-label rubik-font">Home</h2>
            <img className="nav-link-image"
              src="https://images.unsplash.com/photo-1666091863721-54331a5db52d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
          </a>
          <a className="nav-link" href="#">
            <h2 className="nav-link-label rubik-font">Work</h2>
            <img className="nav-link-image"
              src="https://images.unsplash.com/photo-1666055642230-1595470b98fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=995&q=80" />
          </a>
          <a className="nav-link" href="#">
            <h2 className="nav-link-label rubik-font">About</h2>
            <img className="nav-link-image"
              src="https://images.unsplash.com/photo-1666005487638-61f45819c975?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
          </a>
          <a className="nav-link" href="#">
            <h2 className="nav-link-label rubik-font">Contact</h2>
            <img className="nav-link-image"
              src="https://images.unsplash.com/photo-1665910407771-bc84ad45676b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80" />
          </a>
          <a className="nav-link" href="#">
            <h2 className="nav-link-label rubik-font">Join Us</h2>
            <img className="nav-link-image"
              src="https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
          </a>
        </div>
      </nav>
    </header>

    <button id="nav-toggle" type="button" onClick={toggleNav}>
      <i className="open fa-light fa-bars-staggered"></i>
      <i className="close fa-light fa-xmark-large"></i>
    </button>
  </div>
}