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;

First I'm wondering why you can use `SyntheticKeyboardEvent` even though it's not imported. Secondly, can you provide output of `console.log(Event.currentTarget.value)` before doing `setState`? Also please clarify your question. Do you get an error? If so: when does it occur? Can you also provide related sources (e.g. your `Header` component)? — AmazingTurtle, Feb 24 '18 at 23:56
Search.jsx?c103:27 Uncaught TypeError: Cannot read property 'searchTerm' of null — reiahx01, Feb 25 '18 at 00:09
my overall question is how to i get rid of the error i have in the title of the post — reiahx01, Feb 25 '18 at 00:10

score 4 · Answer 1 · answered Jul 24 '18 at 12:32

4

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

answered Jul 24 '18 at 12:32

jarmlaht

47
3

This was it for me. Nice simple solution. – slotdp02 Jul 27 '18 at 00:17

score 3 · Answer 2 · answered Feb 25 '18 at 00:12

//@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

Jimi Pajala · Answer 3 · 2018-04-05T11:55:19.497

In my experience this error occurs because you are assigning Event.currentTarget.value straight to setState -function.

You could be doing something like this to avoid this certain problem.

const toState = Event.currentTarget.value;
return this.setState({ searchTerm: toState });

I don't have much information behind rule which triggers this warning. My best guess is that, it is used to avoid certain setState -events that could be unwanted or are not controlled too much. e.g. user input is assigned to state without parsing and validating it first.

Other notice => I think it's not into best practices to use uppercase naming convention to variables. Those should be only used in React JSX -components. Therefore you should name Event as event or like mouseEvent etc.

ps. Just wondering is there reason behind using " " in State type annotation compared to string or ?string ?

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

3 Answers3