仅从一个字段中删除星号

Question

I have a custom component that takes in values from an API and then displays them to a user, however within this component I give a 'required' flag to give an asterisk to the label, however I only want one field as seen below to have an asterisk not both as is currently happening.

<Grid item xs={12} sm={6}>
                        <SearchUsers
                            name="primaryOfficerId"
                            label="PO Responsible"
                            id="primaryOfficerId"
                            onSelect={change.bind(null, 'primaryOfficerId')}
                            error={touched.primaryOfficerId && Boolean(errors.primaryOfficerId)}
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <SearchUsers
                            name="supportOfficerId"
                            label="Support Officer"
                            id="supportOfficerId"
                            onSelect={change.bind(null, 'supportOfficerId')}
                        />
                    </Grid>

And now my custom component

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

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]);

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;
return (
    <FormControl required className={classes.formControl} id={NAME} error={props.error}>
        <FormControlLabel control={<InputLabel htmlFor={NAME}>{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>
);
};

Below you can see an image of my problem, both PO, and So responsible have an asterisk. I need only PO to have this asterisk but my component does not currently allow for individuals

Answer 1

Simply make your component customizable by passing it a required prop as boolean then in your component make it dynamic :

<FormControl required={props.required}>
  // ... 
</FormControl>

So now you can use it with an asterisk <SearchUsers required /> or without <SearchUsers required={false} />

Answer 2

将required其他属性添加到Search组件，然后将其用作FormControl值：

<FormControl required={props.required} />