I’m looking to write an HOC that counts and prints to the console the number of <h1/> elements in the wrapped component. For example:

const Foo: FC<{}> = ({}) => {
    return (
        <div>
            <h1>Foo</h1>
            <p>Bar</p>
        </div>
    )
}


export default countH1(Foo)

this should print 1 and then return Foo as is for rendering.

React.Children.forEach(child => {...})

seems to be about the explicit children property and not descendant html elements. How can I achieve this?

  • zamithalOP
    2·
    1 day ago

    Unfortunate, this seems like something that should be pretty trivial on the surface but I can see why I’d need a non react solution.

    I’ll probably break out of react and walk the dom, seems like it will work best for me.

    Thanks for the help!