Cannot call `this.setState` with object literal bound to `partialState` because string [1] is compatible not with string literal [2]

Question

I've been banging my head against the wall trying to get this to work, any advice? I'm using react with flow here. I am having quite a fight understand this code annotation stuff and i am learning at the same time. At first it was overwhelming but after i spent some time on google searching for anything remotely close i've hit a dead end. help?

//@flow

import React, { Component } from 'react';
import ShowCard from './ShowCard';
import Header from './Header';

type Props = {
  shows: Array<Show>
};

type State = {
  searchTerm: " "
};

class Search extends Component<Props, State> {

  handleSearchTermChange = (Event: SyntheticKeyboardEvent<KeyboardEvent> & { currentTarget: HTMLInputElement }) => {
    //this.setState({ searchTerm: event.currentTarget.value });
    const newState = this.setState({ searchTerm: Event.currentTarget.value });
    return newState;
  };

  render() {
    return (
      <div className="search">
        <Header searchTerm={this.state.searchTerm} showSearch handleSearchTermChange={this.handleSearchTermChange} />
        <div>
          {this.props.shows
            .filter(
              show =>
                `${show.title} ${show.description}`.toUpperCase().indexOf(this.state.searchTerm.toUpperCase()) >= 0
            )
            .map(show => <ShowCard key={show.imdbID} {...show} />)}
        </div>
      </div>
    );
  }
}

export default Search;

Answer 1

I think you should first set the type of searchTerm, like this:

type State = {
  searchTerm: string
};

and then

class Search extends Component<Props, State> {
  state = {
    searchTerm: " ",
  };

See: https://flow.org/en/docs/react/components/#toc-adding-state

Answer 2

//@flow

import React from 'react';
import { Link } from 'react-router-dom';

const Header = (props: { showSearch?: any, handleSearchTermChange?: Function, searchTerm?: string }) => {
  let utilSpace = null;

  if (props.showSearch) {
    utilSpace = (
      <input onChange={props.handleSearchTermChange} value={props.searchTerm} type="text" placeholder="Search" />
    );
  } else {
    utilSpace = (
      <h2>
        <Link to="/search">Back</Link>
      </h2>
    );
  }

  return (
    <header>
      <h1>
        <Link to="/">svideo</Link>
      </h1>
      {utilSpace}
    </header>
  );
};

Header.defaultProps = {
  showSearch: false,
  handleSearchTermChange: function noop() {},
  searchTerm: ''
};

export default Header;

This is Header.jsx