Type '(event: FormEvent) => void' is not assignable to type '() => any'.

In my parent component I'm just passing in a function which handles onChange to the child:

<SearchInput handleSearchTyping={this.handleSearchTyping}/>

@bind
handleSearchTyping(event: React.FormEvent<HTMLInputElement>) {
  const target = event.target as HTMLInputElement;
  const { value: searchText } = target;

  const search = (text: string) => {
    const { searchList } = this.state;
    const searchedCoins = findAsset(text, searchList);
    this.setState({ searchList: searchedCoins });
  };

  const clearSearch = () => {
    this.setState({ searchList: this.state.saved });
  };

  const handleUpdate = (num: number) => (num > 1 ? search(searchText) : clearSearch());

  return handleUpdate(searchText.length);
}

The child: SearchInput:

import React from 'react'

export const SearchInput = (props: { handleSearchTyping(): void }) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

Also tried:

interface IProps {
  handleSearchTyping(): void;
}

export const SearchInput = (props: IProps) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

What is the correct type to past into the props of SearchInput?

Type '(event: FormEvent) => void' is not assignable to type '() => any'.

In my parent component I'm just passing in a function which handles onChange to the child:

<SearchInput handleSearchTyping={this.handleSearchTyping}/>

@bind
handleSearchTyping(event: React.FormEvent<HTMLInputElement>) {
  const target = event.target as HTMLInputElement;
  const { value: searchText } = target;

  const search = (text: string) => {
    const { searchList } = this.state;
    const searchedCoins = findAsset(text, searchList);
    this.setState({ searchList: searchedCoins });
  };

  const clearSearch = () => {
    this.setState({ searchList: this.state.saved });
  };

  const handleUpdate = (num: number) => (num > 1 ? search(searchText) : clearSearch());

  return handleUpdate(searchText.length);
}

The child: SearchInput:

import React from 'react'

export const SearchInput = (props: { handleSearchTyping(): void }) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

Also tried:

interface IProps {
  handleSearchTyping(): void;
}

export const SearchInput = (props: IProps) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

What is the correct type to past into the props of SearchInput?

• javascript
• reactjs
• typescript

• Try <SearchInput handleSearchTyping={() => this.handleSearchTyping}/> – user11043998 Commented Feb 21, 2019 at 6:17

1 Answer 1

Ah just fixed it:

import React from 'react'

interface IProps {
  handleSearchTyping(event: React.FormEvent<HTMLInputElement>): void;
}

export const SearchInput = (props: IProps) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

Needed to use the event: React.FormEvent<HTMLInputElement> type.