How to show placeholder instead of the state's value at pageload?

Question

I am trying to show the placeholder of an input instead of its state value. When I load the page it shows a blank select box, which makes sense because the testType state is null when the page first loads. How can I get it to just show the placeholder instead of the null state?

 function RandomSelection(props) { const [testType, setTestType] = useState(null); const handleTestType = value => { setTestType(value); }; return( <Select placeholder="Test Type..." value={testType} onChange={handleTestType} > <Option value="Option 1"> Option 1 </Option> <Option value="Option 2">Option 2</Option> <Option value="Option 3">Option 3</Option> </Select> ) }

The Select option is from Ant Design, however I feel the solution to this may apply to Material-UI and Bootstrap as well.

Answer 1

Since you never show the import path, and your code works perfectly fine using Antd's Select , my guess is that you're using the Select from MUI (partly because you also tagged material-ui in your question). So check your import path, because MUI Select placeholder is set by the label prop:

Right

import { Select } from 'antd';

Wrong

import { Select } from '@mui/material';

Answer 2

In const [testType, setTestType] = useState(null); , set useState 's default value to what you want the placeholder to be instead of null .

Answer 3

在 And Design 的文档中，它说placeholder应该是一个React Node ，这应该是它不工作的原因。