Material UI - how to disable select on condition

Question

I have my component which uses Select from the MUI

import Select from "@material-ui/core/Select";

export class RowSelectComponent extends React.Component {
    render() {
        const {details, classes, name, displayName, values, updateScenarioDetailsField, readOnly=false} = this.props;
        return <FormRow>
            <FormLabel>{displayName}</FormLabel>
            <FormContent>
                <Select
                    value={details && details[name]}
                    onChange={(event) => {
                        updateScenarioDetailsField(name, event.target.value);
                    }}
                    className={classes.input}
                >   
                    {values && values.map((value, index) =>
                        <MenuItem key={index} value={value}>{value}</MenuItem>
                    )}               
                </Select></FormContent>
        </FormRow>;
    }
}

I want to be able to disable the select when the variable readOnly is true. It works when I write it like:

                     <Select
                        value={details && details[name]}
                        onChange={(event) => {
                            updateScenarioDetailsField(name, event.target.value);
                        }}
                        className={classes.input}
                        disabled
                    >  

but when I try to do it like this it deosn't work:

                        <Select
                            value={details && details[name]}
                            onChange={(event) => {
                                updateScenarioDetailsField(name, event.target.value);
                            }}
                            className={classes.input}
                            disabled={readOnly}
                        >  

How to solve it ?

Answer 1

I would do smt like this. React is really functional:

import React from "react";

import Select from "@material-ui/core/Select";

export default function App() {
  
  const getDisabled = val => {
    if (val) return { disabled: true };
    return {};
  };
  
  return (
    <div className="App">
      <Select
        // You can pass under the readOnly prop
        {...getDisabled(true)}
        // Other props here
      />
    </div>
  );
}

So, With your example:

export class RowSelectComponent extends React.Component {

   getDisabled = val => {
     if (val) return { disabled: true };
     return {};
   }
    render() {
        const {details, classes, name, displayName, values, updateScenarioDetailsField, readOnly=false} = this.props;
        return <FormRow>
            <FormLabel>{displayName}</FormLabel>
            <FormContent>
                <Select
                    value={details && details[name]}
                    onChange={(event) => {
                        updateScenarioDetailsField(name, event.target.value);
                    }}
                    {...this.getDisabled(readOnly)}
                    className={classes.input}
                >   
                    {values && values.map((value, index) =>
                        <MenuItem key={index} value={value}>{value}</MenuItem>
                    )}               
                </Select></FormContent>
        </FormRow>;
    }
}