React - hide redundant meta with useEffect hook

0 votes
93 views
added Feb 26, 2024 in React by lcjr First Warrant Officer (11,900 points)

In React, you can achieve this by using the useEffect hook to remove the second <meta> tag with the name attribute "description" after the component is mounted. Here's how you can do it:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const removeSecondMetaDescription = () => {
      const metaTags = document.querySelectorAll('meta[name="description"]');
      if (metaTags.length > 1) {
        metaTags[1].remove();
      }
    };
    
    removeSecondMetaDescription();

    // Cleanup function
    return () => {
      // You can add cleanup code here if necessary
    };
  }, []);

  return (
    <div>
      {/* Your component JSX goes here */}
    </div>
  );
}

export default App;

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...