React Js Get Element by Id

    const { useState, useEffect } = React;

​

    const App = () => {

      function updateElement() {

        const element = document.getElementById('myElementId');

​

        if (element) {

          element.innerHTML = 'Updated content';

          element.style.color = 'red';

        }

      }

​

      return (

        <div className="container">

          <h3>React Js Get Element by id</h3>

          <div id="myElementId">Initial Content</div>

          <button onClick={updateElement}>Update Element</button>

        </div>

      );

    }

​

    ReactDOM.render(<App />, document.getElementById('app'));

  </script>

    const { useState,useEffect } = React;

​

    function App() {

     useEffect(() => {

        // This code will run after the component has rendered

        const element = document.getElementById('myElementId');

​

        // Check if the element exists before accessing its content

        if (element) {

          const content = element.innerHTML;

          console.log(content); // You can log or use the content as needed

        }

      }, []); // The empty array [] as the second argument ensures this runs only once after initial render

​

      return (

        <div className='container'>

          <h3>React Js Get Element by id</h3>

          <p id="myElementId">This is the content of the div.</p>

        </div>

      );

    }

​

    ReactDOM.render(<App />, document.getElementById('app'));

  </script>

    const { useState } = React;

    function App() {

      const [isVisible, setIsVisible] = useState(true);

​

      const handleToggleVisibility = () => {

        // Access the DOM element by its ID

        const elementById = document.getElementById('myElementId');

        if (elementById) {

          // Toggle the visibility

          elementById.style.display = isVisible ? 'none' : 'block';

          setIsVisible(!isVisible);

        } else {

          console.error("Element with ID 'myElementId' not found.");

        }

      };

​

      return (

        <div className='container'>

          <h3>React Js Get Element by id | Toggle Visibility </h3>

          <button onClick={handleToggleVisibility}>Toggle Visibility</button>

          <div id="myElementId" style={{ display: isVisible ? 'block' : 'none' }}>

            This is my element

          </div>

        </div>

      );

    }

​

    ReactDOM.render(<App />, document.getElementById("app"));

  </script>