How to disable field in field array from component?

Question

I need to disable the field in fieldArray, however I haven't found any APi to do that. I can't pass a variable to the field like disabled={isDisabled} because I'm using field array.

{fields.map((e, i) => (
  <TableRow
    key={i}
    className={classes.row}
    onClick={() => chooseBill(i)}
    style={{ backgroundColor: currentBill == i && '#cff3ff' }}
  >
    <TableCell className="tb-cell">
      <Field
        name={`${e}.condition_related_to`}
        component="input"
        onChange={onChangeForm}
        type="radio"
        value="employment_in"
      />
    </TableCell>
    <TableCell className="tb-cell">
      <Field
        name={`${e}.condition_related_to`}
        component="input"
        onChange={onChangeForm}
        type="radio"
        value="auto_accident_in"
        onClick={() => window.alert('You must fill `state` for auto accident')}
        />
      </TableCell>
      <TableCell className="tb-cell">
        <Field
          name={`${e}.condition_related_to`}
          component="input"
          onChange={changeForm}
          type="radio"
          value="other_accident_in"
        />
      </TableCell>
      <TableCell className="tb-cell" style={{ overflow: 'visible', minWidth: 50 }}>
        <Field
          name={`${e}.accident_place`}
          myStyles={tableSelectStyles}
          onChange={onChangeForm}
          disabled={!isConditionRelatedToDisabled}
          placeholder=""
          component={tableSelect}
          options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
        />
      </TableCell>
    </TableRow>
  ))}

Here I have the field "accident_place" which has to be disabled if the field "condition_related_to" is equal to "employment_in".

Answer 1

You can disable which ultimately will disable the as well.

CSS

disabled
{
  pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}

React

<TableCell className={`tb-cell ${`${e}.condition_related_to === "employment_in" ? "disabled": ""`}`} style={{ overflow: 'visible', minWidth: 50 }}>
        <Field
          name={`${e}.accident_place`}
          myStyles={tableSelectStyles}
          onChange={onChangeForm}
          placeholder=""
          component={tableSelect}
          options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
        />
      </TableCell>

Codesandbox

OR

You can just disable field with same approach

<Field
    name={`${e}.accident_place`}
    myStyles={tableSelectStyles}
    onChange={onChangeForm}
    placeholder=""
    component={tableSelect}
    options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { 
    label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
    className={`tb-cell ${`${e}.condition_related_to === "employment_in" ? "disabled": 
    ""`}`}
 />

Answer 2

Field Component takes in a component prop which you are using too. As I understand from your question you wish to disable the field

 <Field
      name={`${e}.accident_place`}
      myStyles={tableSelectStyles}
      onChange={onChangeForm}
      disabled={!isConditionRelatedToDisabled}
      placeholder=""
      component={tableSelect}
      options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
    />

Now adding a disabled prop to input, textarea or select field component directly will disable them. However in order to disable the field for a custom component which in your case is tableSelect, you need to receive the disabled Prop in your component and pass it on to the Select field that you use

const tableSelect = ({disabled, options, onChange, onBlur, name, value  ...rest}) => {

    return (
      <select 
         disabled={disabled}
         onChange={onChange}
         name={name}
         value={value}
     >
         {options.map(option => {/* return option here */})}
     </select>
   )

}

Using the disabled prop in custom component is important because otherwise the disabled prop will not be honoured. Also make sure that if you are using any library for select, you are passing in the disabled prop by the name the library requires

Answer 3

You can get the value of an item in the FieldArray using fields.get(index) documentation here

So the solution is going to look something like this (I just cut out the non-relevant parts).

{fields.map((e, i) => (
      ...
        <Field
          name={`${e}.accident_place`}
          disabled={fields.get(i).condition_related_to === 'employment_in'}
          ...