Question: I have stumbled on a showstopping mystery with React + Styled Components. I am at a complete loss. 

Here's my component:

```
import React from 'react';
import styled from "styled-components";

class SearchBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            searchStr: '',
            isEditing: false,
            isSearching: false,
            isIdle: true,
            activeMode: 'search'
        };
    }

    onChange=(e)=>{
        console.log("on change input");
        this.setState( {
            ...this.state
        }, () => {
            // nada...
        });
    };

    render () {

        const SearchBarStyle = styled.div`
            height: 85%;
            `;

        return (
            <SearchBarStyle>
                <input type="text" onChange={this.onChange} placeholder="Search"/>
            </SearchBarStyle>
        );
    }
}

export default SearchBar;

```

The problem is this: as soon as I start typing into the `input`, `setState` is invoked. When that happens everything under `<SearchBarStyle>` resets! my first typed character is erased and the input control starts from scratch, showing the placeholder hint...

**Here comes the mindbending stuff:**

If I replace `<SearchBarStyle>` with a simple `div` **OR** I never call `setState` the problem doesn't occur. I can type freely... Somehow, calling `setState` on a component built with styled-components is resetting it completely!

Whiskey-Tango-Foxtrot!?

Answer: 
Check this code 

Issue #1. Input value not set. Input element should be

```
<input
          value={this.state.searchStr}
          type="text"
          onChange={this.onChange}
          placeholder="Search"
        />

```

Issue #2. target input value is not set in state, your onChange handler should be

```
onChange = e => {
    this.setState({ searchStr: e.target.value });
  };

```

<https://codesandbox.io/s/heuristic-montalcini-mkiyq>
You don't use the `state` value as the `input` value and you don't assign the new value to the `state` through `e.target.value`

```
onChange = (e) => {
  console.log("on change input");
  // e.target.value contains the updated value of the input
  this.setState({
    searchStr: e.target.value
  }, () => {
    console.log('state updated', this.state);
  });
};

```

Assign the `searchStr` from `state` to value

```
<input
  type="text"
  value={this.state.searchStr}
  onChange={this.onChange}
  placeholder="Search"
/>

```

To keep the focus of the input define the `SearchBarStyles` above the outside of the `SearchBar` component

```
const SearchBarStyle = styled.div`
  height: 85%;
`;

class SearchBar extends React.Component {
  ..

```