I'm trying to work with state in react using typescript. In the line "return monster.name.toLowerCase().includes(search)" I'm getting this error message "Property 'name' does not exist on type 'never'." The API can be found here https://jsonplaceholder.typicode.com/users. What i'm i doing wrong her or what am I missing or not doing.
import React, { Component } from 'react';
import './App.css';
import CardList from './Components/CardList/CardList';
interface IProps {
superhero: string;
}
interface IState {
monsters: [],
search: string,
}
class App extends Component<IProps, IState> {
state: IState;
constructor(props: IProps){
super(props);
this.state = {
monsters: [],
search: '',
}
}
componentDidMount(){
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => this.setState({monsters: users}))
}
render(){
interface IContact {
id: number;
name: string;
}
const searchMonsters = (e: any) => {
console.log(e.target.value)
this.setState(
{
search: e.target.value
}
);
}
const { monsters, search } = this.state;
//return monster.name.toLowerCase().includes(search) giving error Property 'name' does not exist on type 'never'
const filteredMonsters = monsters.filter( monster => {
return monster.name.toLowerCase().includes(search)
});
console.log(this.state.monsters);
return (
<div className="App">
<input type="search" placeholder="Search Monster" onChange={searchMonsters}/>
<CardList monsters={filteredMonsters}/>
</div>
);
}
}
export default App;