Why React based Wordpress plugin shortcode content is not rendered?

130 views Asked by At

Why React based Wordpress plugin does not render "content" in the div?

Following the Pangolin tutorial to make plugin: https://github.com/gopangolin/wp-reactivate

I have an admin menu, with the main item and the sub item, in Admin.php I do this modification:

Added these lines in enqueue_admin_scripts

wp_enqueue_script( $this->plugin_slug . '-admin-script-2', plugins_url( 'assets/js/admin2.js', dirname( __FILE__ ) ), array( 'jquery' ), $this->version );

            wp_localize_script( $this->plugin_slug . '-admin-script-2', 'twppwr_object', array(
                'api_nonce'   => wp_create_nonce( 'wp_rest' ),
                'api_url'     => rest_url( $this->plugin_slug . '/v1/' ),
                )
            );

Created the submenu:

/*
        * Add submenus to the Tikex menu.
        */
        add_submenu_page(
            $this->plugin_slug,
            __( 'Időpontok', $this->plugin_slug ),
            __( 'Időpontok', $this->plugin_slug ),
            'manage_options',
            $this->plugin_slug . '-admin2',
            array( $this, 'display_admin2_page' )
        );

in webpack.config.js I added this line:

'js/admin2': path.resolve(__dirname, 'app/admin2.js'),

I copied admin.js and made a admin2.js with this content, :

/* global window, document */
if (!window._babelPolyfill) {
    require('@babel/polyfill')
}

import React from 'react'
import ReactDOM from 'react-dom'
import Profile from './containers/Profile.jsx'

document.addEventListener('DOMContentLoaded', function () {
    ReactDOM.render(
        <Profile wpObject={window.twppwr_object} />,
        document.getElementById('tiket-on-wordpress-admin-2')
    )
})

Profile.jsx:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Profile from './Tikex/Profile'

export default class Shortcode extends Component {
    render() {
        return <Profile initialView={this.props.wpObject.initial_view} />
    }
}

Shortcode.propTypes = {
    wpObject: PropTypes.object,
}

and Profile.tsx:

import React from 'react'

export default function Shortcode({}: {}) {
    return <div>Hello</div>
}

I see that the div with id tiket-on-wordpress-admin-2 is created.

But content is empty. Why content is not render in?

0

There are 0 answers