So if you’ll humor me, I have reduced this example to a bare minimum and would like to share it here.
In my Wix page I have created a Velo Custom Element (from the Embed Code list) and render it with the following code:
import React , { useState } from ‘react’ ;
import { render , W } from ‘@wix/react-velo’ ;
function App ( ) {
const [ background , setBackground ] = useState ( ‘green’ );
return (
<W. customElement2 />
);
}
$w . onReady (() => render ( App , $w , React ));
Then in the Custom Element Attributes screen I connect it to the FullCalendar.js velo code file with the tag name my-full_calendar.
In FullCalendar.js I have the following:
import React from ‘react’ ;
import ReactWebComponent from ‘react-web-component’ ;
import Tabs from ‘./tabs’ ;
class MyFullCalendar extends React . Component {
render () {
return < Tabs/> ;
}
}
ReactWebComponent . create (< MyFullCalendar /> , ‘my-full_calendar’ );
And then in tabs.js I have:
import React , { useState } from “react” ;
const Tabs = () => {
//const [activeTab, setActiveTab] = useState(‘tab1’);
return (
< div > Hello World !</ div >
);
};
export default Tabs ;
With the useState commented out (as it is here) HelloWorld! renders on my page, but if I uncomment it, then my page no longer loads and I get the following error in my Chrome Debugger:
Uncaught TypeError: Cannot read properties of null (reading ‘useState’)
I’m not understanding why I am getting this error, since I provide a default value to useState. Any assistance the team could provide in helping me understand this would be greatly appreciated.
Thanks.
ReactWebComponent . create (< MyFullCalendar /> , ‘my-full_calendar’ );