How to use wp.hooks.addAction() in React JS/Gutenberg?

Question

I am able to successfully use wp.hooks.applyFilters() and wp.hooks.addFilter(), but I’m not able to render a React Component using wp.hooks.addAction(). However, the console.log() runs just fine within the callback for an action. This is my code:

import { createHooks } from 'WPBeginner - WordPress Tutorials/hooks';

let globalHooks = createHooks();

const Header = () => {
    return (
        <h1>Header Component</h1>
    );
}

const RevisedHeader = () => {
    return (
        <h1>Revised Header Component</h1>
    )
}

export default class App extends Component {

    constructor( props ) {
        super();

        globalHooks.addFilter( 'replace_header', 'revisedHeaderCallback', this.revisedHeaderCallback );
        globalHooks.addAction( 'after_replace_header', 'afterRevisedHeaderCallback', this.afterRevisedHeaderCallback );
    };

    revisedHeaderCallback( header ) {
        return <RevisedHeader />;
    }

    afterRevisedHeaderCallback() {
        return <RevisedHeader />;
    }

    render() {

        return(
            <div className="App">
                { globalHooks.applyFilters( 'replace_header', <Header /> ) }
                { globalHooks.doAction( 'after_replace_header' ) }
            </div>
        );
    }
}
0
, , Siddharth Thevaril 12 months 0 Answers 125 views 0

Leave an answer