react, redux and typescript error during build

Question

I am very new to react and redux, I am following this tutorial, at the part about Making a container, I am getting an error (fail to compile):

./src/containers/Hello.tsx
(24,61): error TS2345: Argument of type 'typeof Hello' is not assignable to parameter of type 'ComponentType<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusia...'.
  Type 'typeof Hello' is not assignable to type 'StatelessComponent<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnt...'.
    Type 'typeof Hello' provides no match for the signature '(props: { enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

since I am following the tutorial step by step at this stage I am not sure how to fix this error.

Hello container:

import Hello from '../components/Hello';
import * as actions from '../actions/';
import { StoreState } from '../types/index';
import { connect, Dispatch } from 'react-redux';

export function mapStateToProps({ enthusiasmLevel, languageName }: StoreState) {
  return {
    enthusiasmLevel,
    name: languageName,
  };
}

export function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiasmAction>) {
  return {
    onIncrement: () => dispatch(actions.incrementEnthusiasm()),
    onDecrement: () => dispatch(actions.decrementEnthusiasm()),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);

Hello component:

import * as React from 'react';
import './Hello.css';

export interface Props {
  name: string;                   // required
  enthusiasmLevel?: number;       // optional (using ? after its name)
  onIncrement?: () => void;
  onDecrement?: () => void;
}

class Hello extends React.Component<Props, object> {
  render () {
    const { name, enthusiasmLevel = 1, onIncrement, onDecrement } = this.props;

    if (enthusiasmLevel <= 0) {
      throw new Error('You could be a little more enthusiastic.');
    }

    return(
      <div className="hello">
        <div className="greeting">
          Hello {name + getExclamationMarks(enthusiasmLevel)}
        </div>
        <div>
          <button onClick={onDecrement}>-</button>
          <button onClick={onIncrement}>+</button>
        </div>
      </div>
    );

  }
}

export default Hello;

function getExclamationMarks (n: number) {
   return Array(n + 1).join('!');
 }

A guess but it looks like your component is expecting two props: EnthusiasmLevel & Name. The container component looks like it is receiving an argument as a typeof query. have you checked that you are following the tutorial to the letter? It may be that you are instantiating your Hello container incorrectly with an argument or prop being passed to it as the wrong value... — Francis Leigh
– Francis Leigh, Commented Jan 5, 2018 at 16:48
Any reason you're defining Hello as a class and not a function, like the tutorial does? I'm not really a TypeScript expert but it seems like it's complaining about class signatures and that could be effected by your choice of component definition syntax. — bmceldowney
– bmceldowney, Commented Jan 5, 2018 at 19:53

Assaf Kamil · Accepted Answer · 2018-01-06 09:37:22Z

1

The error indicates that connect function expects a stateless component while you provide a stateful component - since the second argument for React.Component is object.

I suggest to go with:

const Hello = ({
  name,
  enthusiasmLevel = 1,
  onIncrement,
  onDecrement
}: Props) => {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic.');
  }
  return(
    <div className="hello">
      <div className="greeting">
        Hello {name + getExclamationMarks(enthusiasmLevel)}
      </div>
      <div>
        <button onClick={onDecrement}>-</button>
        <button onClick={onIncrement}>+</button>
      </div>
    </div>
  );
}

answered Jan 6, 2018 at 9:37

Assaf Kamil

341 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react, redux and typescript error during build

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related