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>
Here you are using [`Uncontrolled Components`](https://reactjs.org/docs/uncontrolled-components.html) so on every `setState` your component is getting re-render and eventually you lost old value.

To solve this issue you must use `Controlled Components` i.e. set the `value` attribute of input to the state value like,

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

```