React:Uncaught Invariant Violation: Objects are not valid as a React child

Question

I am creating a simple react calendar using full calendar and google calendar API, am using the following official documents full calendar docs , here is the official demo live demo

Here is a functional component

import React, { useState, useEffect, useContext, useRef } from 'react';
import { Calendar as FullCalendar } from '@fullcalendar/core';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const Calendar = () => {
    const [calendar, setCalendar] = useState('');
    const calendarRef = useRef('');

    useEffect(() => {
        if (calendarRef.current) {
             console.log(calendarRef);
            setCalendar(new FullCalendar(calendarRef.current, {
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,listYear'
                  },              
                googleCalendarApiKey: 'MYKEY',
            }));        
        }
    }, [calendarRef.current]);

    // console.log(calendar);

    return (
        <div>
            <h1>Jestm Calendar</h1>
            <div ref={calendarRef}>{calendar}</div>

        </div>
    )
}


export default Calendar;

Now when I run my app, iam getting the following error Uncaught Invariant Violation: Objects are not valid as a React child , what am I doing wrong?

Answer 1

The issue is you are trying to print the FullCalendar Object directory in the render .

 return (
        <div>
            <h1>Jestm Calendar</h1>
            <div ref={calendarRef}>{calendar && calendar.render ? calendar.render() : null}</div>

        </div>
    )