0

I got this problem and I need some help. This is the message I got: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNod...' enter image description here

Here is the code in Calendar:

import * as React from 'react';
import styles from './Calendar.module.scss';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { ICalendarProps } from './ICalendarProps';
import {ICalendarState} from './ICalendarState';
import { escape } from '@microsoft/sp-lodash-subset';
import ExampleComponent from './Kalender';


export default class Calendar extends React.Component<ICalendarProps,ICalendarState> {

  public render(): React.ReactElement<ICalendarProps>{

    let style={backgroundColor:this.props.color};

    return (
      <div className={ styles.calendar }>
        <div className={ styles.container }>
          <div className={ styles.row } style={style}>
            <ExampleComponent/>
          </div>
        </div>
      </div>
    );
  }
}

and here is the code in Kalender:

import * as React from 'react';
import styles from './Calendar.module.scss';
import 'fullcalendar';
import 'moment';
import 'jquery';
import { IListItem } from './IListItem';
import  {ICalendarProps} from './ICalendarProps';
import {ICalendarState} from './ICalendarState';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';


export default class ExampleComponent extends React.Component<ICalendarProps , ICalendarState>{
  private listItemEntityTypeName: string = undefined;
  constructor(props: ICalendarProps, state: ICalendarProps) {
    super(props);

    this.state = {
      status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready',
      items: []

    };

     this.readItems();

  }

  public componentWillReceiveProps(nextProps: ICalendarProps): void {
    this.listItemEntityTypeName = undefined;
    this.setState({
      status: this.listNotConfigured(nextProps) ? 'Please configure list in Web Part properties' : 'Ready',
      items: []
    });
  }

  public render(): React.ReactElement<ICalendarProps> {
    const items: JSX.Element[] = this.state.items.map((item: IListItem, i: number): JSX.Element => {

      return(  

     <option>{item.Id } {item.Title} {item.Created}</option>
    )
    });

    return  (<div>
              <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" />
              <div id="calendar"/>
            </div>);
    }


    public componentDidMount() {
    $("#calendar").fullCalendar({
      header: {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay"
      },
      events: [
        {
          title: "event1",
          start: "2018-05-01",
          color: "red"
        },
        {
          title: "event2",
          start: "2018-05-01",
          end: "2018-05-07",
          color: "green"
        },
        {
          title: "event3",
          start: "2018-05-09T12:30:00",
          end: "2018-05-09T16:30:00",
          allDay: false // will make the time show
        }
      ]
    });
  }

//-----------------------------------------------------------------get starts


private readItems(): void {
  this.setState({
    status: 'Loading all items...',
    items: []
  });
  this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items?`,//$select=Title,Id. 
    SPHttpClient.configurations.v1,
    {
      headers: {
        'Accept': 'application/json;odata=nometadata',
        'odata-version': ''
      }
    })
    .then((response: SPHttpClientResponse): Promise<{ value: IListItem[] }> => { //
      return response.json();

    })
    .then((response: { value: IListItem[] }): void => {
      this.setState({
        status: `Successfully loaded ${response.value.length} items`,
        items: response.value
         });
        //  console.log(this.state.items);
    }, (error: any): void => {
      this.setState({
        status: 'Loading all items failed with error: ' + error,
        items: []
      });
    });
}

private listNotConfigured(props: ICalendarProps): boolean {
  return props.listName === undefined ||
    props.listName === null ||
    props.listName.length === 0;
}
//--------------------------------------------------------------- get ends
}

My goal is to build calendar that get data from SP list. Thank's in advance!

  • Please post here the complete error you are getting. – mohd tahir May 4 '18 at 3:33
2

Take a look at ICalendarProps, which are the props for the ExampleComponent. Whatever properties are defined in ICalendarProps need to be passed to ExampleComponent.

For example, if your ICalendarProps interface has the following properties:

title: string;
start: string;
end: string;
allDay: boolean;
color: string;

NOTE: this is just an example. I can't see your ICalendarProps in the code you sent, you'll have to replace my code with your ICalendarProps properties.

Then you would call your component as follows:

<ExampleComponent
    title={"event1"}
    start={"2018-05-01"}
    end={"2018-05-01"}
    allDay={true}
    color={"red"}
/>

I agree that the error message isn't very helpful, but if you read it completely, it'll tell you what's missing in your component.

I hope it helps?

  • Hi, I understand but what if I have multiple events in the calendar? (I admit that my crud is not completely done but at least should not trow any error. ) – Hristofor Hristoforov May 4 '18 at 6:28
  • @DonPérignon if you have multiple events then you should pass event array to your component which you will consume accordingly. But as Hugo has written, you need to pass all the required props to examplecard component for error to go away. – Shashank May 11 '18 at 11:17
  • Ok, now I understand, It was confusing be cause I have props witch have nothing to do with the calendar it self. Anyway when I pass all the props its working! Thank's a lot @Shashank & Hugo Bernier – Hristofor Hristoforov May 14 '18 at 11:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.