react this.setState Warning on mounted or mounting

Question

I am consistently getting:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the SearchInput component.

I have tried following these:
https://facebook.github.io/react/docs/two-way-binding-helpers.html#linkedstatemixin-before-and-after

https://stackoverflow.com/questions/21029999/react-js-identifying-different-inputs-with-one-onchange-handler

https://stackoverflow.com/questions/28773839/react-form-onchange-setstate-one-step-behind

The problem is simple: when a user types into the input field capture the input via the onChange attribute and setState

import React, { Component } from 'react';

class SearchInput extends Component {
  constructor() {
    super();
    this.state = {
      inputValue: ''
    };
    this.onChange = this.onChange.bind(this);
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.onChange} />
    );
  }

  onChange(e) {
    console.log('yo');
    this.setState({ inputValue: e.target.value });
  }
}

export default SearchInput;

How do I mount my component so that the warning goes away and I can update user input state?

UPDATE
I recently changed my .babelrc file to this:

{
  "presets": ["latest-minimal", "stage-1", "react"],
  "plugins": ["react-hot-loader/babel"]
}

following this: https://github.com/gabmontes/babel-preset-latest-minimal

But as soon as I revert back to what I had before:

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": ["react-hot-loader/babel"]
}

the warning went away.

Something in the latest-minimal not jiving.

`state = { inputValue: "" }` try assigning state above constructor instead inside — kartikag01, Nov 06 '16 at 20:38
100% percent sure that the error is not about the code above. — FurkanO, Nov 06 '16 at 20:59
@zerkms I'm using webpack to load the index.html which has a root entry point. The only component is this one `` — M.Holmes, Nov 06 '16 at 21:20

score -1 · Answer 1 · answered Nov 06 '16 at 21:57

use defaultValue instead of value.

render() {
 return (
  <input
    type="text"
    defaultValue ={this.state.inputValue}
    onChange={this.onChange} />
 );
}

checkout this uncontrolled components concept:

https://facebook.github.io/react/docs/forms.html#uncontrolled-components

basically Input maintain its own state when you set value use expression it will trigger state change in input component (unmounted component) while rendering SearchInput component.

react this.setState Warning on mounted or mounting

1 Answers1