1

I am facing a problem with creating an instance of a class in SPFX. I am not sure what I should put in as a parameter. The compiler complains on whatever I put as a parameter. Here is my code:

import { DefaultButton, values } from 'office-ui-fabric-react';
import * as React from 'react';
import { IReduxCounterProps } from '../components/IReduxCounterProps';
import Output from '../components/CounterOutput/Output';
import { ICounterState } from './ICounterState';

export default class Counter extends React.Component<IReduxCounterProps, ICounterState> {

    constructor(props: IReduxCounterProps) {
        super(props);
        this.state = {
            counter: 0
        }       
    }

    private counterOnIncrement() {
        console.log("Counter Increment");
        this.setState({ counter: this.state.counter + 1 });
        console.log(this.state.counter);        
    }

    private counterOnDecrement() {
        console.log("Counter Decrement");
        this.setState({ counter: this.state.counter - 1 });
    }
    
    public render() : React.ReactElement<IReduxCounterProps> {
        return(
            <div>
                <Output value={this.state.counter} description="test" />
                <DefaultButton text="Increment" onClick={() => this.counterOnIncrement()} />
                <DefaultButton text="Decrement" onClick={() => this.counterOnDecrement()} />
            </div>
        );
    }
}

const states = new Counter(1);
const test = new Counter("blavla");
const props = new Counter(props).state.counter;

IReduxCounterProps.ts:

export interface IReduxCounterProps {
  description: string;
  value: number;
}

ICounterState.ts:

export interface ICounterState {
    counter: number;
}

I am actually practicing some Redux on SPFx so what I am trying to do is access my state outside the Counter class in order to pass my state as a prop but the instance is requiring a parameter and complains on whatever I put as a parameter.

Here are my errors:

enter image description here

I would appreciate if someone could help me out with this issue. Thanks in advance.

2

The error message is quite clear, you can't assign a type 'number' or 'string' as 'IReduxCounterProps' on line 40 & 41. The type must be strictly according to the definition.

const c = new Counter({ description: `blavla`, value: 1 });

Whereas for line 42, you've declared a const 'props' to create an instance of class Counter with the same const 'props'.

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.