Type 'void' is not assignable to type '((event: MouseEvent<HTMLInputElement>) => void) | undefined'
import * as React from "react";
import "./App.css";
import PageTwo from "./components/PageTwo";
export interface IPropsk {
data?: Array<Items>;
fetchData?(value: string): void;
}
export interface IState {
isLoaded: boolean;
hits: Array<Items>;
value: string;
}
class App extends React.Component<IPropsk, IState> {
constructor(props: IPropsk) {
super(props);
this.state = {
isLoaded: false,
hits: [],
value: ""
this.handleChange = this.handleChange.bind(this);
}
fetchData = val => {
alert(val);
};
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
return (
<div>
<div>
<input type="text" value={this.state.value} onChange= {this.handleChange}
<input type="button" onClick={this.fetchData("dfd")} value="Search" />
</div>
</div>
);
}
}
export default App;
In the above code example I tried to call a method(fetchData ) by clicking button with a paremeter.But I gives a error from following line
<input type="button" onClick={this.fetchData("dfd")} value="Search" />
The error is
type 'void' is not assignable to type '((event: MouseEvent) => void) | undefined'.
In your code this.fetchData("dfd")
you are calling the function. The function returns void
. void
is not assingable to onClick
which expects a function.
Fix
Create a new function that calls fetchData e.g. onClick={() => this.fetchData("dfd")}
.
More
This is a very common error prevented by TypeScript 🌹
With Functional Components, we use React.MouseEvent
and it clears things up...
const clickHandler = () => {
return (event: React.MouseEvent) => {
...do stuff...
event.preventDefault();
}
}
You could also do something like
fetchData = (val: string) => (event: any) => {
alert(val);
};
Alternatively, you can set a type for your event
, such as React.MouseEvent
. You can read more about it here.