How to implement dynamic select?

Question

JavaScript

Hmm. The situation is crazy.
What is available - ReactJS, array with n-workers ala

{
id: 1,
name: 'вася'
},
{
id: 2,
name: 'petya'
}

You need to make a dynamic form to add these guys to the abstract action (pass an array with them to api)
The form includes a default selector with a choice, but you can dynamically add another selector and select the remaining workers. How to implement this? I tried to mark the selected workers or remove them from the array, but then the react itself puts a stick in the wheels - it re-renders the entire component and the selected workers will be removed from the previously selected ones, because they have a mark.
I described everything very chaotically, but I hope someone will understand and be able to tell, below I will attach an example of a mold, I hope it will be easier with it

Answer 1

With redux it will look like this:
erikras.github.io/redux-form/#/examples/deep?_k=3m09yp
UPD1. It will look something like this. But I would place the filter of the list of workers in select. Then you will need to get the form values ​​​​from the store and do the same + you can use reselect to optimize this whole thing
UPD2. I have updated the code a bit. The old version didn't work...

class MyForm extends Component {
  render() {
    const { handleSubmit, fields: { workers }, workersList } = this.props
    const selectedWorkersIds = workers.map(workerField => workerField.value.id)
    const finalWorkersList = workersList.filter(
      worker => selectedWorkersIds.indexOf(worker.id) === -1
    )
    return (
      <form onSubmit={handleSubmit}>
        <WorkersMultiInput
          field={workers}
          workersList={finalWorkersList}
          />
      </form>
    )
  }
}

class WorkersMultiInput extends Component {
  render() {
    const { field, workersList } = this.props

    return (
      <div>
        {
           field.map((workerField, i) => {
             // Просто добавим в список выбранного воркера 
             const finalWorkerList = [ workerField.value, ...workersList ]            
             return (
               <WorkerInput key={i} field={workerField} workersList={finalWorkersList} />
             )
           }
        }
      </div>
    )
  }
}

Answer 2

can you use chosen or a similar plugin?
https://harvesthq.github.io/chosen/
It will be possible to select all workers in one input