将道具传递到自定义组件中

Question

I have a custom component of

const Search = (props) => {
const { type: TYPE, name: NAME, label: LABEL, onSelect, filter, value } = props;
const [data, setData] = useState([]);
const [select, setSelect] = useState(value || -1);

const applyFilter = (data) => {
    let result = data;
    if (filter) {
        result = filter(data);
    }
    return result;
};

useEffect(() => {
    getLookupData(TYPE)
        .then((response) => {
            setData(response);
        })
        .catch((error) => {
            if (error === HttpStatus.NOT_FOUND) {
                setData([]);
            } else {
                throw error;
            }
        });
}, [TYPE]);

useEffect(() => {
    if (value) {
        setSelect(value);
    }
}, [value]);

const options = applyFilter(data).map((item) => (
    <MenuItem value={item.id} key={item.id}>
        {item[NAME]}
    </MenuItem>
));

const handleChange = (event) => {
    setSelect(event.target.value);
    onSelect && onSelect(event);
};

const { classes } = props;
const labelProps = { ...(props.required && { required: props.required }) };
return (
    <FormControl className={classes.formControl} id={NAME} error={props.error}>
        <FormControlLabel control={<InputLabel htmlFor={NAME} {...labelProps}>{LABEL}</InputLabel>} />
        <Select
            name={TYPE}
            value={select}
            onChange={handleChange}
            disabled={props.disabled || options.length === 0}
            input={<Input name={TYPE} id={NAME} />}
        >
            <MenuItem value=''>
                <em>None</em>
            </MenuItem>
            {options}
        </Select>
    </FormControl>
);
};

It takes in a menu item by default of None, however i want to pass this None menuitem as a prop and call it when i want too, as for some fields i want the option of 'none' and for some fields i do not want the option of none, currently the system is hard coded to have none appear on every drop down and i dont wish for this to happen

<Search 
    required
    type="contractOptionToExtend"
    name="optionToExtend"
    label="Option To Extend"
    id="contractOptionToExtend"
    onSelect={change.bind(null, 'contractOptionToExtend')}
    error={touched.contractOptionToExtend && Boolean(errors.contractOptionToExtend)}
    value={values.contractOptionToExtend}
/>

On the above field i want to say wether or not i want the None option, I can solve this by passing it as a prop to the Search component but im not totally sure how, I have done something similar for props.required as you can see but currently i cannot do the same for the menu item.

Answer 1

{props.showNone 
    ? <MenuItem value=''>
        <em>None</em>
    </MenuItem> 
    : null
}

then within the desired field

showNone={true}

credit to @Abhey Sehgal