Develop Reference

Cannot read properties of null (reading 'getApi') in FullCalendar.io reactjs

i'm new to ReactJs and i'm trying to class component of FullCalendar to a functional component i watched some tutorials but when i did it i keep getting this error
Uncaught TypeError: Cannot read properties of null (reading 'getApi')
and i searched for a functional component for the FullCalendar but i didn't find anything useful
this is my class component:
import React from "react";
import FullCalendar from "#fullcalendar/react";
import './Fullcalendar.css'
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction"; // needed for dayClick
export default class DemoApp extends React.Component {
calendarComponentRef = React.createRef();
state = {
calendarWeekends: true,
calendarEvents: [
// initial event data
{ title: "Event Now", start: "2022-03-21", backgroundColor: "red" }
]
};
render() {
setTimeout(() => {
let calendarApi = this.calendarComponentRef.current.getApi();
calendarApi.gotoDate(this.props.date); // call a method on the Calendar object
});
return (
<div>
<div className="demo-app">
<div className="demo-app-calendar">
<FullCalendar
id="fullCalendar"
contentHeight={720}
firstDay={1}
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
ref={this.calendarComponentRef}
events={this.state.calendarEvents}
/>
</div>
</div>
</div>
);
}
}
and this is what i did to converted to a functional component:
import React, { useRef } from "react";
import FullCalendar from "#fullcalendar/react";
import './Fullcalendar.css'
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction"; // needed for dayClick
function Fullcalendar({date}) {
const calendarComponentRef = useRef(null);
setTimeout(() => {
let calendarApi = calendarComponentRef.current.getApi();
calendarApi.gotoDate(date);
});
return (
<div>
<div className="demo-app">
<div className="demo-app-calendar">
<FullCalendar
id="fullCalendar"
contentHeight={720}
firstDay={1}
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
ref={calendarComponentRef}
/>
</div>
</div>
</div>
)
}
export default Fullcalendar
i tried and i searched but i don't know what i have to do.

It seems that you are setting a timeout which has no time associated, so it will run immediately. It tries to get the calendar component, but that seems to be before you've even returned the calendar component from your function, so I would expect that the calendar object doesn't exist yet, which is why your code can't find it.
Also, all you're doing with that API object is immediately setting the calendar date, but that's something you can do directly within the calendar options, if you want the calendar to start at a specific date.
Why not simply add
initialDate={date}
to the options in the <FullCalendar section instead?

I had your same problem. We can reach this api only after your component finishes rendering calendar. So when I put it in useEffect, it worked!
import React, { useRef } from "react";
import FullCalendar from "#fullcalendar/react";
import './Fullcalendar.css'
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction"; // needed for dayClick
function Fullcalendar({date}) {
const calendarComponentRef = useRef();
useEffect(() => {
let calendarApi = calendarComponentRef.current.getApi();
calendarApi.gotoDate(date);
});
return (
<div>
<div className="demo-app">
<div className="demo-app-calendar">
<FullCalendar
id="fullCalendar"
contentHeight={720}
firstDay={1}
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
ref={calendarComponentRef}
/>
</div>
</div>
</div>
)
}
export default Fullcalendar

React Lazyload as soon as page interacted with

I'm building a React site which uses live chat and am using the react-livechat package. I've paired this up with the react-lazyload plugin to try to prevent it from adversely affect page load times.
I'm now trying to work out a way to load the livechat component in as soon as the page is interacted with. Currently it only renders when the page is scrolled to within a set distance of the component which by default is the footer of the page. This does prevent the page load being impacted but requires a user to scroll a certain distance before the component loads. Ideally it would load form any interaction with the page.
import React, { Component } from 'react';
import LiveChat from 'react-livechat';
import LazyLoad from 'react-lazyload';
class App extends Component {
render() {
return (
<div className="App">
...
<LazyLoad once>
<LiveChat license={'xxxxxx'} />
</LazyLoad>
...
</div>
);
};
}
export default App;

I managed to get this behavior with a workaround and loading the component after a certain period of time. I found that 10 seconds worked well to ensure even on mobile everything had entirely rendered.
// App.js
import React, { Component } from 'react';
import LazyLiveChat from './components/utils/lazyLiveChat';
class App extends Component {
constructor() {
super();
this.state = { loadLiveChat: false };
}
componentDidMount() {
setTimeout(() => this.setState({loadLiveChat: true}), 10000);
}
render() {
return (
<div className="App">
...
<LazyLiveChat loadChat={this.state.loadLiveChat} />
...
</div>
);
};
}
export default App;
// lazyLiveChat.js
import React, { Component } from 'react';
import LiveChat from 'react-livechat';
class LazyLiveChat extends Component {
render() {
if (this.props.loadChat) {
return (
<LiveChat license={xxxxxx} />
);
}
return null;
}
}
export default LazyLiveChat;

Meteor react Issue with flashing image - shows logged out then logged in

UPDATE: after restart it works now. However it stills shows the logged out component first then the logged in one. Why is this because the user is logged in I just refresh the page?
UPDATE 2:
It has gone back to the flashing of the logged out => then then what it should be and then to white again, after no changes just restarting meteor.
UPDATE 3:
So it works then I navigate to this page but not others.It seems because the registration page subscribes to the items collection so that is how it picks it up. I thought it should not refresh the Box component when changing pages and should be subscribed to the items collection from the Box component itself. This page is loaded via flow router and is inputted into the content area of the site see below:
import Items from '/imports/collections/items/items.js';
export default class Registration extends TrackerReact(React.Component){
constructor(){
super();
this.state = {
subscription: {
items: Meteor.subscribe("allStarterItems")
}
}
}
The main page is here, the issues lies within the LeftNavbar area as this contains the boxes:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import LeftNavbar from './LeftNavbar';
export const MainLayout = ({content}) => (
<div className="main-layout">
<LeftNavbar />
<div className="right content-page">
<main>
{content}
</main>
</div>
</div>
)
Here is the left navbar page:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Box from '/imports/ui/left_navbar/Box';
export default class LeftNavbar extends TrackerReact(React.Component){
constructor(){
super();
}
render(){
return (
<div className="left side-menu">
<div className="body rows scroll-y">
<div className="sidebar-inner ">
<Box />
</div>
</div>
</div>
)
}
}
Hey everyone I have an issue in my project.
I have an area where I have a stack of images stacked on top of each other and are overlayed. I know the css etc work as I have it on another page just not loading from a db.
Here the the file that checks if the user is logged in or not to decide what component to render:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import BoxSignedIn from '/BoxSignedIn';
import BoxSignedOut from '/BoxSignedOut';
export default class Box extends TrackerReact(React.Component){
constructor(){
super();
}
render(){
var layout;
if (Meteor.user()) {
layout = <BoxSignedIn />;
} else {
layout = <BoxSignedOut />;
}
return (
layout
)
}
}
Here is the component that is loaded. However when I reload the page it shows the logged out component for a split second, then it shows nothing. On the source of the page it shows no src from the images. In the console it sometimes shows 2 of the image sources, sometimes 3
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Items from '/imports/collections/items/items.js';
export default class BoxSignedIn extends TrackerReact(React.Component){
constructor(){
super();
this.state = {
subscription: {
items: Meteor.subscribe("allStarterItems")
},
layers: {
layer1: Meteor.user().profile.layer.1,
layer2: Meteor.user().profile.layer.2,
layer3: Meteor.user().profile.layer.3
}
}
}
componentWillUnmount(){
this.state.subscription.items.stop();
}
getItemSource(itemKey){
var itemer = Items.findOne({key: itemKey});
if(!itemer){
return "";
}else{
console.log(itemer.srcEntire); // shows src correctly
return itemer.srcEntire;
}
}
render(){
return (
<div className="media" >
<div className="Area">
<div className="container-on-top box-small" >
<img id="layer1" className="on-top img-responsive center-block on-top" name="layer1" src={this.getItemSource(this.state.layers.layer1)} />
<img id="layer2" className="on-top img-responsive center-block on-top" name="layer2" src={this.getItemSource(this.state.layers.layer2)} />
<img id="layer3" className="on-top img-responsive center-block on-top" name="layer3" src={this.getItemSource(this.state.layers.layer3)} />
</div>
</div>
</div>
)
}
}

Using Meteor with input of checkbox

Hello I have having a problem with my checkbox's staying checked when I check them. So what I want to be able to do is check and uncheck as I click the box. But once I check it it is stuck with a check and I can no longer do anything to it. Here is the relevant code!
import React, {Component} from 'react';
export default class ResolutionSingle extends Component {
toggleChecked() {
Meteor.call('toggleResolution', this.props.resolution._id, this.props.resolution.copmlete);
}
deleteResolution() {
Meteor.call('deleteResolution', this.props.resolution._id);
}
render() {
return (
<li>
<input type="checkbox"
readOnly={true}
checked={this.props.resolution.complete}
onClick={this.toggleChecked.bind(this)} />
{this.props.resolution.text}
<button className="btn-cancel"
onClick={this.deleteResolution.bind(this)}>
×
</button>
</li>
)
}
}
Here are the methods
Meteor.methods({
addResolution(resolution) {
Resolutions.insert({
text: resolution,
complete: false,
createAt: new Date()
});
},
toggleResolution(id, status) {
Resolutions.update(id, {
$set: {complete: !status}
});
},
deleteResolution(id) {
Resolutions.remove(id);
}
});
Here is the main wrapper
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import ResolutionsForm from './ResolutionsForm.jsx';
import ResolutionSingle from './ResolutionSingle.jsx';
Resolutions = new Mongo.Collection("resolutions");
export default class ResolutionsWrapper extends TrackerReact(React.Component) {
constructor(){
super();
this.state = {
subscription: {
resolutions: Meteor.subscribe("allResolutions")
}
}
}
componentWillUnmount() {
this.state.subscription.resolutions.stop();
}
resolutions() {
return Resolutions.find().fetch();
}
render(){
return (
<div>
<h1>My Resolutions</h1>
<ResolutionsForm />
<ul className="resolutions">
{this.resolutions().map( (resolution)=>{
return <ResolutionSingle key={resolution._id} resolution={resolution} />
})}
</ul>
</div>
)
}
}

You have a typo in your code.
Meteor.call('toggleResolution', this.props.resolution._id, this.props.resolution.copmlete);
It should be complete instead of copmlete. In order to avoid errors like that in the future, you can use check functions in your Meteor methods.

integrate jquery ui datepicker into React JS

I'm trying to integrate the jquery ui datepicker on an input text using React js , I have this jsbin , http://jsbin.com/diyifa/edit?html,js.
I have this component called Datepicker.js
import React from 'react';
import ReactDOM from 'react-dom';
import {UserProfileForm} from 'react-stormpath';
export default class DateInput extends React.Component {
render() {
return (
<input type="text" className="datepicker"/>
)
}
}
export default class Calendar extends React.Component {
componentDidMount: function () {
$('.datepicker').datepicker();
render()
{
return (
<DateInput/>
)
}
}
}
ReactDOM.render(
<Calendar/>, document.getElementById('dpick')
);
and I want to call this component in my page called PatPage.js
import React from 'react';
import DocumentTitle from 'react-document-title';
import {UserProfileForm} from 'react-stormpath';
import {Calendar} from './Datepicker.js';
<div className="form-group">
<label id="id_label_dateofbirth" htmlfor="id_field_dateofbirth" className="col-md-6 control-label2">
<span className="e2bcode" id="E2BCodes">D.2.1</span>Date of Birth
</label>
<div className="col-md-3 divhidetxtdpatient" id="showhidemasked">
<div id="dpick"></div>
</div>
</div>
(there's more code but I'm only showing the part when im implementing this)
Any hints to make it work would be appreciated, I'm new to react JS, thanks

Assuming your build system is webpack, you should use the provide plugin to make sure $ and jQuery are loaded...
new webpack.ProvidePlugin({
Promise: 'bluebird',
jQuery: 'jquery',
$: 'jquery',
React: 'react'
})
Also, add the jquery-ui to your entry list before the main entry.js
The following is an ES6 Class of what you will roughly need
//DatePicker.js
export default class DatePicker extends React.Component {
componentDidMount() {
$(this.refs.input).datepicker();
}
componentWillUnmount() {
$(this.refs.input).datepicker('destroy');
}
render() {
const props = this.props;
return <input ref="input" type="date" {...props} />
}
}
//entry.js
import ReactDOM from 'react-dom';
import DatePicker from './DatePicker';
ReactDOM.render(
<DatePicker
value="2015-01-01"
onChange={(evt)=>console.log('new date', evt.target.value)}
/>,
document.getElementById('dpick')
)

I mad made it work this way:
Datepicker.js
import React from 'react';
export default class Datepicker extends React.Component {
render() {
return (
<input type="text" id="id_field_dateofbirth" className="datepicker form-control" placeholder="DD-MM-YYYY"/>
);
}
}
Calendar.js
import React from 'react';
import Datepicker from './Datepicker';
export default class Calendar extends React.Component {
componentDidMount() {
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "-116:+34",
dateFormat: 'dd/mm/yy'
});
}
render() {
return (
<Datepicker />
);
}
}
And I call my component from another file like this
import Calendar from '../components/Calendar'
.....
.....
<Calendar />

check src attribute of script tag of jquery ui datepicker , maybe it pointing to wrong destination