Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6208

Why is State returning empty first in React TypeScript & Property does not exist on type 'never'?

$
0
0

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;

Viewing all articles
Browse latest Browse all 6208

Trending Articles