title: How to fill fields with a single click on a table row with ReactJS
body: <p>I am making an react application with a simple CRUD functionality. In my environment I use a framework called react bootstrap 2.</p>
  
  <p>Link: <a href="https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html" rel="nofollow noreferrer">https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html</a></p>
  
  <p>I have a form that the user can fill the information: </p>
  
  <pre><code>&lt;form id="car-form" onSubmit={this.handleSubmit}&gt;
      &lt;input type="hidden" name="carId" /&gt;
      &lt;div className="row"&gt;
          &lt;div className="form-group col-sm-3"&gt;
              &lt;label&gt;Brand&lt;/label&gt;
              &lt;input type="text" className="form-control" placeholder="Enter brand" value={this.state.brand} onChange={this.handleChange} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="row"&gt;
          &lt;div className="form-group col-sm-3"&gt;
              &lt;label&gt;Model&lt;/label&gt;
              &lt;input type="text" className="form-control" placeholder="Enter model" value={this.state.model} onChange={this.handleChange} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="row"&gt;
          &lt;div className="form-group col-sm-3"&gt;
              &lt;label&gt;Color&lt;/label&gt;
              &lt;input type="text" className="form-control" placeholder="Enter color" value={this.state.color} onChange={this.handleChange} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="row"&gt;
          &lt;div className="form-group col-sm-3"&gt;
              &lt;label&gt;TopSpeed&lt;/label&gt;
              &lt;input type="number" className="form-control" placeholder="Enter speed" value={this.state.topSpeed} onChange={this.handleChange} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="btn-group mr-2"&gt;
          &lt;button type="submit" className="btn btn-danger mr-1"&gt;Save changes&lt;/button&gt;
          &lt;button type="reset" className="btn btn-danger mr-1"&gt;New record&lt;/button&gt;
          &lt;button type="submit" className="btn btn-danger mr-1"&gt;Delete record&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The user can add a car and this working fine with the .NET core backend. I have a function from the official react bootstrap 2 documentation to select a row. </p>
  
  <pre><code>const rowEvents = {
      onClick: (e, row, rowIndex) =&gt; {
          console.log(`clicked on row with index: ${rowIndex}`);
      }
  };
  </code></pre>
  
  <p>When I click on a row I get the right index number. Now when I click on a row I want to fill the fields with <strong>data</strong>. </p>
  
  <p>This is my <strong>handleChange method</strong></p>
  
  <pre><code>handleChange(event) {
          this.setState({
              brand: event.target.brand,
              model: event.target.model,
              color: event.target.color,
              topspeed: event.target.top
          })
  };
  </code></pre>
  
  <p>It still doesn't work when I click on a row.</p>
  
  <p>How can I fill the fields when I click on a row? </p>
  
  <p>Solution I used:</p>
  
  <p><a href="https://stackoverflow.com/questions/44671082/how-do-i-programatically-fill-input-field-value-with-react">How do I programatically fill input field value with React?</a></p>