title: React dynamic state for input elements
body: <p><strong>Parent:</strong> (The TextField component is a styled input element from office-ui-fabric-react: <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield" rel="nofollow noreferrer">Link</a>)</p>
  <pre><code>&lt;Searchbar&gt;
      &lt;TextField label=&quot;Account ID&quot; /&gt;
      &lt;TextField label=&quot;Account Name&quot; /&gt;
  &lt;/Searchbar&gt;
  </code></pre>
  <p><strong>Searchbar component:</strong></p>
  <pre><code>export default class Searchbar extends React.Component&lt;ISearchbarProps, ISearchbarState&gt; {
  
      private _searchfields: React.ReactNode[];
  
      public constructor(props: ISearchbarProps) {
  
          super(props);
          this.state = {
              searchValues: {},
          };
  
          this._handleChange = this._handleChange.bind(this);
          this._getChild = this._getChild.bind(this);
          this._getChild();
          
      }
  
      private _handleChange(event: any, field: string) {
          const searchValues = this.state.searchValues;
          searchValues[field] = event.target.value;
          this.setState({ searchValues });
          console.log(this.state.searchValues);
      }
  
      private _getChild(): void {
  
          let fielCounter = 0;
  
          this._searchfields = React.Children.map(this.props.children, (child: any) =&gt; {
              if (child.type.displayName === 'StyledTextFieldBase') {
  
                  const searchValues = this.state.searchValues;
                  const fieldname = child.props.label.replace(/\s/g, &quot;&quot;) + fielCounter++;
                  searchValues[fieldname] = &quot;&quot;;
                  this.setState({ searchValues });
  
                  return React.cloneElement(child, {
                      value: this.state.searchValues[fieldname], 
                      onChange: (e) =&gt; this._handleChange(e, fieldname)
                  });
              }
          });
      }
  
      public render(): React.ReactElement&lt;ISearchbarProps&gt; {
  
          return (
              &lt;div&gt;{this._searchfields}&lt;/div&gt;
          );
  
      }
  
  }
  </code></pre>
  <p><strong>The Problem:</strong></p>
  <p>When I type something into the input element, the state console output in the _handleChange shows the updated state, but the input value stays the same as I wouldn't type anything.</p>
  <p>Also each letter gets remove from the state. So if I type &quot;test&quot;, the console would output &quot;t&quot;, &quot;e&quot;, &quot;s&quot;, &quot;t&quot;</p>
  <p>What am I doing wrong?</p>