Having trouble with React useState hook

Ask the community
1

Hi:

I have the following code in a file I am using inside of my Html Custom Element. It does not render when loaded.

import React , { useState } from “react” ;

const Tabs = () => {
const [ activeTab , setActiveTab ] = useState ( ‘tab1’ );
return (
< div className = “Tabs” >
{ /* Tab nav / }
< ul className = “nav” >
< li className ={ activeTab === “tab1” ? “active” : “” }> Tab 1 </ li >
< li className ={ activeTab === “tab2” ? “active” : “” }> Tab 2 </ li >
</ ul >
< div className = “outlet” >
{ / content will be shown here */ }
</ div >
</ div >
);
};
export default Tabs ;

If I replace the "const [ activeTab , setActiveTab ] = useState ( ‘tab1’ ); " line with “const activeTab = ‘tab1’”, it renders. Now I have v1.0.47 version of @therobbs/react-velo loaded and the library’s ReadMe gives exactly this example as what is supposed to work. Anyone have any idea why useState hook might not be working for me?

I’m a newbie, so any assistance would be greatly appreciated.

2

In looking at the debugging tools in Chrome, I am seeing this error:

Cannot read properties of null (reading ‘useState’)

Any idea what that might be about and how to get around it?

3

If you are using that library, it is not intended to be used in an HTML iFrame element.

For a more complete example on how to utilize the react-velo NPM package, I would check out this workshop that was hosted during our devcon last year

https://github.com/tomenden/devcon-declarative-workshop

4

I’m not actually using it in an iFrame element. I’m using it in a Custom element, which you find in the Embed Code section of Add Elements. This allows you to put an Html Custom Element on your screen, which can then host anything you want, including React code. What I’ve done is mostly working, but React’s useState hook seems to have a problem. I was hoping someone could possibly shed some light on this.

5

One more thing. Today I refactored my code to use react-web-component to set up the custom html element. Simplified the code greatly and works great until I use the element presented above. Then I get the same error. It is choking on the useState hook and returning in the Chrome Debugger:

Uncaught TypeError: Cannot read properties of null (reading ‘useState’)

I am providing a default to useState, so this shouldn’t happen. Wondering if anyone has any idea of what i might be doing wrong.

Thanks.

6

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’ );

7

This message is for the benefit of anyone who might be viewing this in the future and experiencing the same issue. Two things:

One, I was able to get my page functioning by replacing the functional React approach outlined above with the more traditional React class-based approach. In this I used the more traditional state property approach and made ny shared data available via class properties, thereby eliminating the need for a useState hook. (If you take this approach, don’t forget to include a constructor in your react component that calls Super() and that initializes the state and any other shared properties.)

Second, I ended up removing the use of react-web-component and going back to implementing my custom html web component from scratch myself (by having my custom component override HTMLElement rather than React.Component. The reason for this is that although react-web-component is available as an npm package in the Velo environment, the accompanying react-web-component-style-loader package is not. So I needed to get at the guts of the web component implementation in order to add CSS styling properly.

This is just for anyone who happens to be trying what I am trying.

1 Like