In Gatsby/React modify DOM where there’s no direct access

I have a Gatsby site where I am getting content from a WordPress site. The bulk of the content comes from a Graphql query and I get it and show it on the page like this:

<Grid item sm={12}>

Inside of this "singlePost.content" there is a piece of content wrapped around a div with an id that I want to grab and "inject" somewhere else in the page…Is this doable at all in React or Gatbsy?

I’m not even sure how should I be selecting this div, this is not working:

const TableOfContents = ({ content }) => {
    const [table, setTable] = useState([]);

    useEffect(() => {
        const tableContent = content.querySelectorAll("#ez-toc-container");


    }, []);

    return <div>Return</div>;

export default TableOfContents;

As "content.querySelectorAll("#ez-toc-container");" is invalid.

Source: React – Stack Overflow

November 23, 2021
Category : News
Tags: DOM | gatsby | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.