Multi tool use

React render props pattern class errors

Help please.
it is assumed that the component can be used like this:

<MouseCoordinates></MouseCoordinates>

or

<MouseCoordinates>
{(x,y) => { ... }}
</MouseCoordinates>


I don't understand what does it want.
Here is the code:

import React, { MouseEvent } from 'react';

const initialState = { x: 0, y: 0 };
const defaultProps = {
children: (args: TMouseCoordinates) => null,
};

type TMouseCoordinates = typeof initialState;
type TDefaultProps = typeof defaultProps;

type TState = Readonly<TMouseCoordinates>;
type TProps = Partial<
{
children?: (coordinates: TMouseCoordinates) => JSX.Element;
} & TDefaultProps
>;

class MouseCoordinates extends React.Component<TProps, TState> {
static readonly defaultProps: TProps = defaultProps;
^^^^^^^^^^^^

readonly state: TMouseCoordinates = initialState;

componentDidMount() {
document.addEventListener('mousemove', this.handleMouseMove);
^^^^^^^^^^^^^^^^^^^^
}

componentWillUnmount() {
document.removeEventListener('mousemove', this.handleMouseMove);
^^^^^^^^^^^^^^^^^^^^
}

handleMouseMove = (event: MouseEvent<HTMLElement>): void => {
const { screenX = 0, screenY = 0 } = event;

this.setState(() => ({
x: screenX,
y: screenY,
}));
};

render() {
const { children } = this.props;
const isRenderIsFunction = typeof this.props.children === 'function';

return isRenderIsFunction ? children(this.state) : null;
^^^^^^^^^^^^^^^^^^^^
}
}


I have strange errors at:

static readonly defaultProps: TProps = defaultProps;


Type '{ children: (args: { x: number; y: number; }) => null; }' is not
assignable to type 'Partial<{ children?: ((coordinates: { x: number;
y: number; }) => Element) | undefined; } & { chi...'. Types of
property 'children' are incompatible.
Type '(args: { x: number; y: number; }) => null' is not assignable to type '(((coordinates: { x: number; y: number; }) => Element) &
((args: { x: number; y: number; }) => nu...'.
Type '(args: { x: number; y: number; }) => null' is not assignable to type '((coordinates: { x: number; y: number; }) =>
Element) & ((args: { x: number; y: number; }) => null)'.
Type '(args: { x: number; y: number; }) => null' is not assignable to type '(coordinates: { x: number; y: number; }) =>
Element'.
Type 'null' is not assignable to type 'Element'.

here is cryptic error at:

document.addEventListener('mousemove', this.handleMouseMove);


"Argument of type '(event: MouseEvent) => void' is not
assignable to parameter of type
'EventListenerOrEventListenerObject'.n Type '(event:
MouseEvent) => void' is not assignable to type
'EventListenerObject'.n Property 'handleEvent' is missing in type
'(event: MouseEvent) => void'.",

and last

return isRenderIsFunction ? children(this.state) : null;


Cannot invoke an object which is possibly 'undefined'.

defaultProps

children

null

TProps

children

JSX.Element

strictNullChecks

null

undefined

3 Answers
3

type TProps = Partial<
{
children?: (coordinates: TMouseCoordinates) => JSX.Element;
} & {
children: (args: TMouseCoordinates) => null,
}>;


so you simple say: children props is required and not and contain both functions: (args: TMouseCoordinates) => null and (coordinates: TMouseCoordinates) => JSX.Element its simple has no sense.

children

(args: TMouseCoordinates) => null

(coordinates: TMouseCoordinates) => JSX.Element

i guess this is the interface you need:

interface Props{
children?: (args: TMouseCoordinates) => (JSX.Element | null)
}


MouseEvent should not be imported from React

MouseEvent

Here is the correct code:

import React from 'react';

export type TMouseEventRenderer = (coordinates: ICoordinates) => JSX.Element | null;

const initialState = { x: 0, y: 0 };
const defaultProps = {
children: (() => null) as TMouseEventRenderer,
};

type TDefaultProps = typeof defaultProps;
type TProps = Readonly<{ children?: TMouseEventRenderer } & TDefaultProps>;
type TState = Readonly<ICoordinates>;

class MouseCoordinates extends React.Component<TProps, TState> {
static readonly defaultProps: TDefaultProps = defaultProps;
readonly state: TState = initialState;

componentDidMount() {
document.addEventListener('mousemove', this.handleMouseMove);
}

componentWillUnmount() {
document.removeEventListener('mousemove', this.handleMouseMove);
}

handleMouseMove = (event: MouseEvent): void => {
const { screenX = 0, screenY = 0 } = event;

window.requestAnimationFrame(() => {
this.setState(() => ({
x: screenX,
y: screenY,
}));
});
};

render() {
const { children } = this.props;
const isRenderIsFunction = typeof this.props.children === 'function';

return isRenderIsFunction ? children(this.state) : null;
}
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.