I need to fetch integrations info in JSON format and I need help converting useRef (functional component) to createRef(class component). Functional component:
import { createTTNCClient } from '~/shared/clients/ttnc';
const DevicesTable: React.FC<Props> = (props) => {
const TTNCClient = useRef(createTTNCClient());
const fetchIntegrations = async (): Promise<Integration[]> => {
try {
const resp = await TTNCClient.current.getIntegrations();
return resp.data.content;
} catch (err) {
throw new Error(err);
}
};
}
I tried to make a Class component:
export class DevicesTable extends React.PureComponent<Props> {
private TTNCClientRef: React.RefObject<any>;
constructor(props) {
super(props);
this.TTNCClientRef = React.createRef();
}
render() {
const TTNCClient = this.TTNCClientRef.current.getIntegrations();
const fetchIntegrations = async (): Promise<Integration[]> => {
try {
const resp = await TTNCClient;
console.log(resp.data.content)
return resp.data.content;
} catch (err) {
throw new Error(err);
}
};
}
return (
<div></div>
)
}
But it throws error regarding function getIntegrations(). I guess because I didn't add 'createTTNCClient' in the class component. Here how it looks with functional component:
const TTNCClient = useRef(createTTNCClient());
but I don't know how to add 'createTTNCClient()' to 'createRef' in a class component.
Your class component code doesn't appear to call the createTTNCClient constructor.
You could probably do it there in the class constructor:
constructor(props) {
super(props);
this.TTNCClientRef = React.createRef();
this.TTNCClientRef.current = createTTNCClient();
}
Or in the componentDidMount lifecycle method:
componentDidMount() {
this.TTNCClientRef.current = createTTNCClient();
}
And as a precaution, apply some null-checks when attempting to invoke:
const TTNCClient = this.TTNCClientRef.current?.getIntegrations();