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.
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';
In const [testType, setTestType] = useState(null);, set useState's default value to what you want the placeholder to be instead of null.