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?