Remove input fields except one React

Question

I have value fields, a user can add a new value input field. I have validations that require a user to have at least one value, how can I ensure that when deleting a user cannot delete the all the input fields? One should remain.

Here's the code I have so far:

const DropdownVariableRow = ({ variableValue, id, onChange, onRemove, isDefault, setDefault }) => {
  return <Row key={id} className={'form-group'}>
    <SimpleFormText label={<Fragment>
                        Value Name
                    </Fragment>}
                    value={variableValue}
                    onChange={newValue => onChange(newValue, isDefault)}
                    width={{sm: 4}}
                    formGroupWrapper={false}
    />
    <div className='col-sm-1 text-right' style={{paddingTop: 30}}>
        <Button bsSize={Size.SMALL} bsStyle={State.DANGER}
                onClick={() => onRemove()}>
            <Icon icon={'fas fa-times'}/>
        </Button>
    </div>
    </Row>
}

{_.map(modalVariableValues, (variableValue, index) => {
                      return (
                        <DropdownVariableRow
                          key={`DropdownVariable${index}`}
                          variableValue={variableValue}
                          onChange={(value, isDefault) => {
                            let values = _.clone(modalVariableValues)
                            _.set(values, index, value)
                            setModalVariableValues({values, default: isDefault ? value : defaultValue})
                          }}
                          onRemove={()=> {
                            setModalVariableValues({values: _.concat(
                              _.slice(modalVariableValues, 0, index),
                              _.slice(modalVariableValues, index + 1)
                            ), default: defaultValue})
                          }}
                          isDefault={variableValue == defaultValue}
                          setDefault={() =>{
                            setModalVariableValues({values: modalVariableValues, default: variableValue})
                          }}
                          id={`DropdownVariableRow${index}id`}
                        />
                      );
                    })}

Answer 1

You can have a validation where you can check the length of the inputs

const lengthModalVariables = modalVariablesValue.length;
{_.map(modalVariableValues, (variableValue, index) => ...
  ...
                      onRemove={()=> {
                        if(lengthModalVariables <= 1) return;
                        setModalVariableValues({values: _.concat(
                          _.slice(modalVariableValues, 0, index),
                          _.slice(modalVariableValues, index + 1)
                        ), default: defaultValue})
                      }}

Answer 2

You can hide the remove button when you have only one input :

const DropdownVariableRow = ({ variableValue, id, onChange, onRemove, isDefault, setDefault, canRemove }) => {
  return <Row key={id} className={'form-group'}>
    <SimpleFormText label={<Fragment>
                    Value Name
                </Fragment>}
                value={variableValue}
                onChange={newValue => onChange(newValue, isDefault)}
                width={{sm: 4}}
                formGroupWrapper={false}
    />
   { 
    canRemove ? (<div className='col-sm-1 text-right' style={{paddingTop: 30}}>
        <Button bsSize={Size.SMALL} bsStyle={State.DANGER}
            onClick={() => onRemove()}>
            <Icon icon={'fas fa-times'}/>
        </Button>
    </div>) : null
}
</Row>
}

{_.map(modalVariableValues, (variableValue, index) => {
                  return (
                    <DropdownVariableRow
                      key={`DropdownVariable${index}`}
                      variableValue={variableValue}
                      onChange={(value, isDefault) => {
                        let values = _.clone(modalVariableValues)
                        _.set(values, index, value)
                        setModalVariableValues({values, default: isDefault ? value : defaultValue})
                      }}
                      onRemove={()=> {
                        setModalVariableValues({values: _.concat(
                          _.slice(modalVariableValues, 0, index),
                          _.slice(modalVariableValues, index + 1)
                        ), default: defaultValue})
                      }}
                      isDefault={variableValue == defaultValue}
                      setDefault={() =>{
                        setModalVariableValues({values: modalVariableValues, default: variableValue})
                      }}
                      canRemove={modalVariableValues.length > 1 }
                      id={`DropdownVariableRow${index}id`}
                    />
                  );
                })}