title: Update value with user input
body: <p>I have an input field that i would like to update that users first name when you click submit for that specific user. right now i have an alert in handleSubmit to just see if its working. and it is but i want it to update the actual users name. </p>
  
  <p>Displays Users on separate cards. would like the edit button to work for each user.</p>
  
  <pre><code>class User extends Component {
    constructor(props) {
      super(props);
      this.state = {
        names: ''
      }
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.input = React.createRef();
    }
  
    handleChange(event) {
      const target = event.target;
      const value = target.type === 'checkbox' ? target.checked : target.value;
      const name = target.name;
      this.setState({
        [name]: value
      });
    }
  
  handleSubmit(event) { 
      alert('A name was submitted: ' + this.input.current.value);
      event.preventDefault();
    }
    render() {
  
      return (
        &lt;div className='UserCard'&gt;
          &lt;div className='UserCardTop'&gt;
            &lt;form className='Submit' onSubmit={this.handleSubmit}&gt;
              &lt;input
                type="text"
                name="names"
                value={this.state.names}
                ref={this.input}
                onChange={this.handleChange} /&gt;
              &lt;input type="submit" value="Submit" /&gt;
            &lt;/form&gt;
            &lt;h3&gt;{this.props.name} {this.props.last}&lt;/h3&gt;
            &lt;div className='ImageContainer'&gt;
            &lt;img alt="image" width="80" src={this.props.image} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
          &lt;div className='UserCardBottom'&gt;
  
            &lt;h5&gt;{this.props.email}&lt;/h5&gt;
            &lt;h5&gt;{this.props.cell}&lt;/h5&gt;
            &lt;h5&gt;{this.props.city}, {this.props.state}&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  export default User
  </code></pre>
  
  <p>App.js </p>
  
  <pre><code>import React, { Component } from "react";
  import axios from "axios";
  import User from './User'
  import Filter from './Filter.js'
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        users: [],
        searchTerm: '',
        alphabetical: 'az'
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleFilter = this.handleFilter.bind(this);   
  
    }
  
    componentDidMount() {
      axios.get("https://randomuser.me/api/?page=3&amp;results=10&amp;seed=abc")
        .then(response =&gt; {
          console.log(response.data.results);
          this.setState({ users: response.data.results });
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
    handleFilter(filterInput) {
      this.setState(filterInput)
    }
  
    handleChange(event) {
      const target = event.target;
      const value = target.type === 'checkbox' ? target.checked : target.value;
      const name = target.name;
  
      this.setState({
        [name]: value
      });
    }
  
    render() {
      let sortedUsers;
      if (this.state.alphabetical === "az") {
        console.log("sorted");
        sortedUsers = this.state.users.sort((a, b) =&gt;
          a.name.first &gt; b.name.first ? 1 : -1
        );
      }
  
      let filteredUsers = sortedUsers;
  
      if (this.state.searchTerm)
        filteredUsers = this.state.users.filter(u =&gt;
          u.name.first.startsWith(this.state.searchTerm) || u.name.last.startsWith(this.state.searchTerm)
        );
  
      const userNames = filteredUsers.map(u =&gt; {
        return &lt;User
          key={u.email}
          name={u.name.first}
          last={u.name.last}
          image={u.picture.large}
          email={u.email}
          city={u.location.city}
          state={u.location.state}
          cell={u.cell}
        /&gt;;
      });
  
      return (
        &lt;div&gt;
          &lt;Filter
            searchTerm={this.state.searchTerm}
            onFilter={this.handleFilter}
          &gt;&lt;/Filter&gt;
          &lt;select
            name="alphabetical"
            value={this.state.alphabetical}
            onChange={this.handleChange}&gt;
            &lt;option value="az"&gt;
              A to Z
            &lt;/option&gt;
            &lt;option value="za"&gt;Z to A&lt;/option&gt;
          &lt;/select&gt;
  
          {userNames}
        &lt;/div&gt;
      );
    }
  }
  export default App
  </code></pre>