title: How to fix rerendering after select option from react multiple-select?
body: <p>I can't solve why my input is rerendered  when I dynamically add next input. In first step I click on select employe from multiple select and input is dynamically created with id and name of employee.Now I can add allocation for employee but when I add next employee. Allocation value of first employee is removed. </p>
  
  <p>1.Step <a href="https://i.stack.imgur.com/X4dmk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X4dmk.png" alt="select employee for project"></a></p>
  
  <p>2.Step <a href="https://i.stack.imgur.com/orY1B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/orY1B.png" alt="input is created and you can add value of allocation"></a></p>
  
  <p>3.Step <a href="https://i.stack.imgur.com/pLVVP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pLVVP.png" alt="select next employee for project"></a></p>
  
  <p>4.Step <a href="https://i.stack.imgur.com/jpa5E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jpa5E.png" alt="allocation Value of previous employee was cleared"></a></p>
  
  <p>Component ProjectForm (I deleted some unnecessary parts of this code for this question )</p>
  
  <pre><code>
  export default class ProjectForm extends Component {
    constructor(props) {
      super(props);
  
      const { project, timurProjects } = this.props;
  
      this.state = {
        employees:
          project &amp;&amp; project.currentEmployees ? project.currentEmployees : [],
  
        technologies:
          project &amp;&amp; project.technologies
            ? project.technologies.map(mapToId)
            : [],
        allTimurProjects: timurProjects,
        allocationValue:
          project &amp;&amp; project.currentEmployees ? project.currentEmployees : [],
        projectTimur: null,
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleUpdateEmployees = this.handleUpdateEmployees.bind(this);
      this.handleUpdateTechnologies = this.handleUpdateTechnologies.bind(this);
    }
  
    componentDidMount() {
      const { project } = this.props;
      const { allTimurProjects } = this.state;
      this.setState({
        projectTimur: allTimurProjects.find(projectTimur =&gt; {
          return project ? projectTimur.code === project.code : false;
        }),
      });
    }
  
    handleSubmit = values =&gt; {
      const { submitProjectForm, project, successText } = this.props;
      const { employees, technologies, projectTimur } = this.state;
  
      const value = {
        ...values,
        code: projectTimur ? projectTimur.code : null,
        projectManagerId: projectTimur
          ? projectTimur.projectManager.id
          : values.projectManager,
      };
  
      return submitProjectForm(
        value,
        employees,
        technologies,
        (project &amp;&amp; project.id) || null,
      )
        .then(res =&gt; {
          displayNotification(successText, 'success');
          const { id } = res.data.project;
  
          browserHistory.push(`/projects/detail/${id}`);
        })
        .catch(error =&gt; {
          throw new SubmissionError(error.response.data.error);
        });
    };
  
    handleUpdateEmployees(employees) {
      this.setState({
        employees,
      });
    }
  
    handleUpdateTechnologies(technologies) {
      this.setState({
        technologies,
      });
    }
  
    handleUpdateAllocation = allocValue =&gt; {
      console.log(allocValue, 'ALLOCAVALUE');
  
      this.setState({
        allocationValue: allocValue,
      });
    };
  
    render() {
      const {
        projectData,
        project,
        handleSubmit,
        error,
        pristine,
        submitting,
        title,
        submitText,
      } = this.props;
  
      const {
        employees,
        technologies,
        projectTimur,
        allTimurProjects,
        allocationValue,
      } = this.state;
  
      const employeesPristine = isEqual(
        employees,
        project &amp;&amp; project.currentEmployees ? project.currentEmployees : [],
      );
      const technologiesPristine = isEqual(
        technologies,
        project &amp;&amp; project.technologies ? project.technologies.map(mapToId) : [],
      );
      const allocationValuePristine = isEqual(
        allocationValue,
        project &amp;&amp; project.currentEmployees ? project.currentEmployees : [],
      );
      const formPristine =
        employeesPristine &amp;&amp;
        technologiesPristine &amp;&amp;
        pristine &amp;&amp;
        allocationValuePristine;
  
      const defaultPMValue = projectTimur
        ? projectTimur.projectManager.name
        : '--';
      const owners =
        projectTimur &amp;&amp; projectTimur.owner.name ? [projectTimur.owner] : [];
      const projectManagers = projectTimur
        ? [projectTimur.projectManager]
        : projectData.projectManagers;
  
      return (
        &lt;Container&gt;
          &lt;Row&gt;
            &lt;Col&gt;
              &lt;Card className="card-project-add hs-box-shadow mx-auto"&gt;
                &lt;CardHeader&gt;
                  {project ? (
                    &lt;Row&gt;
                      &lt;Col&gt;
                        &lt;FontAwesome icon={['fab', 'product-hunt']} /&gt; {title}
                      &lt;/Col&gt;
                      &lt;Col className="text-right"&gt;
                        &lt;Link to={`/projects/detail/${project.id}`}&gt;
                          Show project detail
                        &lt;/Link&gt;
                      &lt;/Col&gt;
                    &lt;/Row&gt;
                  ) : (
                    &lt;span&gt;
                      &lt;FontAwesome icon={['fab', 'product-hunt']} /&gt; {title}
                    &lt;/span&gt;
                  )}
                &lt;/CardHeader&gt;
                &lt;CardBody&gt;
                  {error &amp;&amp; &lt;Alert color="danger"&gt;{error}&lt;/Alert&gt;}
                  &lt;Form
                    onSubmit={handleSubmit(this.handleSubmit)}
                    onKeyPress={blockSubmitOnEnter}
                  &gt;
                    &lt;FormRow&gt;
                      &lt;/Col&gt;
                      &lt;Col xs="12" lg="5"&gt;
                        &lt;Employees
                          title="Project employees"
                          employees={projectData.employees}
                          defaultValue={
                            (project &amp;&amp; project.currentEmployees) || []
                          }
                          onUpdate={this.handleUpdateEmployees}
                        /&gt;
                        &lt;EmployeeAllocationTable
                          title="Project skills/technologies"
                          employees={employees}
                          project={project}
                          onUpdateAllocation={this.handleUpdateAllocation}
                          defaultValue={
                            (project &amp;&amp; project.currentEmployees) || []
                          }
                        /&gt;
  
                      &lt;/Col&gt;
                    &lt;/FormRow&gt;
                    &lt;FormRow&gt;
                      &lt;Col xs="12" md="4" lg="3"&gt;
                        &lt;Button
                          block
                          color="success"
                          type="submit"
                          disabled={formPristine || submitting}
                        &gt;
                          {submitText}
                        &lt;/Button&gt;
                      &lt;/Col&gt;
                      &lt;Col className="text-md-right mt-3 mt-md-2"&gt;
                        &lt;RequiredFieldsNote /&gt;
                      &lt;/Col&gt;
                    &lt;/FormRow&gt;
                  &lt;/Form&gt;
                &lt;/CardBody&gt;
              &lt;/Card&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>Component Employee </p>
  
  <pre><code>import PropTypes from 'prop-types';
  import Select from 'react-select';
  import { FormGroup } from 'reactstrap';
  
  import { getFilteredEmployees } from '../../../util/employees';
  
  class Employees extends Component {
    handleChange(selectedOptions) {
      const { onUpdate } = this.props;
      onUpdate &amp;&amp;
        onUpdate(
          selectedOptions.map(option =&gt; ({
            id: option.value,
            label: option.label,
          })),
          console.log(selectedOptions, 'SEL'),
        );
    }
  
    render() {
      const { title, employees } = this.props;
      let { defaultValue } = this.props;
  
      defaultValue = defaultValue.map(employee =&gt; ({
        value: employee.id,
        label: employee.fullNameInverted || '[unknown name]',
        allocationValue: employee.allocationValue,
      }));
      console.log(defaultValue, 'DV');
  
      const filteredEmployees = getFilteredEmployees(employees);
  
      const options = filteredEmployees.map(employee =&gt; ({
        value: employee.id,
        label: employee.fullNameInverted,
        allocationValue: employee.allocationValue,
      }));
  
      return (
        &lt;FormGroup&gt;
          &lt;label&gt;{title}&lt;/label&gt;
          &lt;Select
            defaultValue={defaultValue}
            isMulti
            options={options}
            onChange={this.handleChange.bind(this)}
          /&gt;
        &lt;/FormGroup&gt;
      );
    }
  }
  
  Employees.propTypes = {
    title: PropTypes.any,
    employees: PropTypes.array.isRequired,
    defaultValue: PropTypes.array,
    onUpdate: PropTypes.func,
  };
  
  export default Employees;
  
  </code></pre>
  
  <p>Component.EmployeeAllocationTable</p>
  
  <pre><code>import { Table, Input } from 'reactstrap';
  
  export default class EmployeeAllocationTable extends Component {
    constructor(props) {
      super(props);
      let { defaultValue } = this.props;
  
      defaultValue = defaultValue.map(employee =&gt; ({
        value: employee.id,
        label: employee.fullNameInverted || '[unknown name]',
        allocationValue: employee.allocationValue,
      }));
  
      this.state = {
        value: defaultValue,
        key: defaultValue,
        allocationValue: '',
      };
      console.log('State', this.state);
    }
  
    handleChangeInput = e =&gt; {
      const { employees } = this.props;
      const { name, value } = e.target;
      console.log(name, 'Name', value, 'Value');
      const employeesList =
        employees &amp;&amp;
        employees.find(
          employeeLabel =&gt; employeeLabel.id.toString() === e.target.name,
        );
      employeesList.allocationValue = e.target.value;
      e.preventDefault();
      this.props.onUpdateAllocation(employeesList.allocationValue);
  
      this.setState({
        [name]: value,
      });
    };
  
    render() {
      const { employees } = this.props;
  
      const newEmployeesTable =
        employees &amp;&amp;
        employees.map(employee =&gt; {
          const employeesList =
            employees &amp;&amp;
            employees.find(employeeLabel =&gt; employeeLabel.id === employee.id);
  
          return (
            &lt;tr key={employee.id}&gt;
              &lt;td&gt;{employeesList.fullName || employeesList.label}&lt;/td&gt;
              &lt;td&gt;{employeesList.allocationValue} %&lt;/td&gt;
  
              &lt;td&gt;
                &lt;Input
                  name={employee.id.toString()}
                  value={employee.allocationValue}
                  onChange={this.handleChangeInput}
                  placeholder="Allocation on the project (%) "
                  maxLength="3"
                /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          );
        });
  
      return (
        &lt;div&gt;
          &lt;Table&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Allocation on the project&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;{newEmployeesTable}&lt;/tbody&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>