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

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.

CodePudding user response：

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';

CodePudding user response：

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

CodePudding user response：

In the documentation of And Design it says that the placeholder should be a React Node that should be why it is not working.