Hey everybody,
I’m pretty new to react and wordpress and wonder how to import a react component in my custom block. My idea is resusability for my backend and frontend for my modal, so I created a \`src/modal.js\` file
import React, { Component } from ‘./../node_modules/react/index.js’;
import ReactDOM from ‘./../node_modules/react-dom/index.js’;
export class ConfigModalClass extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
</div>
);
}
}
And then I try to integrate it in my component (index.js)
registerBlockType(‘cgb/block-react-lifecycle-block’, {
edit: class extends Component {
constructor() {
}
render() {
return (
<div >
<ConfigModalClass />
</div>
);
}
},
save: function (props) {
return (
<div >
</div>
);
},
});
The error shows up as soon as I add that block to a page or post, yelling
\`Unexpected token at position “<“‘, so basically it’s the first div of the ConfigModalClass.
The same works though when I create a functional component in the index.js. What’s the difference here? How I can put resuable components outside the index.js?
[ad_2]