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}>
    <StyledPostContent>
        {parse(`${singlePost.content}`)}
    </StyledPostContent>
</Grid>

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");

        setTable(tableContent);

        console.log(table);
    }, []);

    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.