We Keep Coding

How can i convert a react componet into a object , any online tool?

react element
const element = (
<h1 className="heading" tabIndex={index}>Hellow world</h1>
)
js object
element = {
type: 'h1',
props: {
className: 'heading',
tabIndex: 0,
children: 'Hellow World'
}
}

Wordpress Gutenberg InnerBlock.Content is not being saved or rendered

I am creating a custom block in Gutenberg via custom plugin. My custom block contains InnerBlocks. The edit function appears to be working correctly, as I can add the block to the page, and place new block elements inside the block as intended. The issue arrises when I reload the page. After I update the page and reload the editor, all of the InnerBlock elements are gone. They are not being saved, and not being rendered on the frontend either. Unless I'm crazy, my save function is not built correctly. Any help would be great. I am well versed in Wordpress and JS, but new to React and Gutenberg. Thanks for any help!
( function( blocks, element, editor ) {
const el = element.createElement;
const { registerBlockType } = blocks;
const InnerBlocks = editor.InnerBlocks;
registerBlockType( 'dab/nest', {
title: 'Disruptive Nest',
icon: 'layout',
category: 'disruptive-blocks',
keywords: [ 'base', 'build', 'custom' ],
edit: function( props ) {
return (
el( 'div', {className: props.className + ' dab-full'},
el( 'div', {className: 'dab-content'},
el( InnerBlocks )
)
)
);
},
save: function( props ) {
return (
el( 'div',
el( 'div',
el( InnerBlocks.Content, null )
)
)
);
},
});
})( window.wp.blocks,
window.wp.element,
window.wp.blockEditor
);

I found this in the Block Editor Handbook ([https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname):
"This is automatically added in the save method, but not on edit" [on the topic of props.className]. That is why I didn't have the classes mirrored initially. Reading it again led me to realize that mirroring the classNames on the "save" function isn't what fixed it, but just having the {} in there after each of the parent el( 'div',, even if you don't specify anything, is what fixed the function.
So, it works like this, and the className is automatically added to the first el( 'div',:
save: function( props ) {
return (
el( 'div', {},
el( 'div', {},
el( InnerBlocks.Content )
)
)
);
},
Thanks, #niklas for helping me realize this.

How to add click event with React createElement

Following is the code that I'm using to create an HTML tag. I want to add a click event on this. How can I add this?
let elem = React.createElement(
this.props.tag,
{
style: this.props.style,
id: this.props.id
onClick: ()
},
[this.props.text]
)

If you are creating an HTML tag, you simply need to pass on the onClick as a function to the element as props. With React.createElement you can write it like
let elem = React.createElement(
this.props.tag,
{
style: this.props.style,
id: this.props.id
onClick: () => {console.log('clicked')}
},
[this.props.text]
)
You could also pass a predefined function like below
let elem = React.createElement(
this.props.tag,
{
style: this.props.style,
id: this.props.id
onClick: this.handleClick.bind(this)
},
[this.props.text]
)

When nesting components this.props.parent returns "undefined". How do I access a parents function?

For example, I have:
<Page><Content1 /><Page>
<Page><Content2 /><Page>
Where Slide is:
var Page = React.createClass({
getInitialState: function() {
return {shouldHide: true};
},
hide: function() {
this.state.shouldHide = true;
},
show: function() {
this.state.shouldHide = false;
},
render: function() {
return (
<div className={this.state.shouldHide ? 'hidden' : ''}>
{this.props.children}
</div>
);
}
});
I want to be able to call the .hide() and .show() functions from the child component. Is this possible?

You can use React.cloneElement to add props to your children in order to use your parent methods
render: function() {
let children = React.cloneElement(this.props.children || <div/>,
{show: this.show, hide: this.hide });
return (
<div className={this.state.shouldHide ? 'hidden' : ''}>
{children}
</div>
);
And you shouldn't mutate your state directly, use this.setState instead.
this
hide: function() {
this.state.shouldHide = true;
},
show: function() {
this.state.shouldHide = false;
},
should be
hide: function() {
this.setState({shouldHide: true});
},
show: function() {
this.setState({shouldHide: false});
},

Reactjs possible to change onclick function name like changing props

Possible to change onclick function like changing props, like changing 'props message' to 'new message' ?
For example:
var SmallMessageBox = React.createClass({
getDefaultProps: function() {
return {
message: 'props message',
onClick: 'this.eventHandler_Two'
}
},
eventHandler_One: function(){
console.log('event1');
},
eventHandler_Two: function(){
console.log('event2');
},
render: function(){
return (
<div>
<small>{this.props.message}</small>
<button onClick={this.eventHandler_One}>button</button>
</div>
);
}
});
React.render(
<SmallMessageBox message="new message" onClick="new onClick function for event2" />, document.getElementById('react-container'),
function(){
console.log('after render');
}
);

Yes, components can be supplied with properties of type function. You can either bind event handlers directly to functions passed through props or do something in your internal component method, before executing the prop function. Please note, that you cannot change definition of supplied function, once target component was initialized, it will not be updated.
Also, in many cases you must use bind on your passed in function to maintain proper context.
Here's how it should look like in accordance with your example:
var SmallMessageBox = React.createClass({
propTypes: {
message: React.PropTypes.string.isRequired,
onClick: React.PropTypes.func
},
getDefaultProps: function() {
return {
message: 'props message',
onClick: function() {
console.log("I will be executed, only if props.onClick was not specified");
}
}
},
eventHandler: function() {
},
render: function() {
return (
<div>
<small>{this.props.message}</small>
<button onClick={ this.props.onClick }>button</button>
</div>
);
}
});
React.render(
<SmallMessageBox onClick={function() { console.log( "remove me to get the other console.log"); }} message="new message"/>, document.getElementById('react-container'),
function(){
console.log('after render');
}
);
I would also encourage you to implicitly specify your props with their type. You can find more information here.