Ant Design select tag no data rename

Question

I am using Ant Design select tag, when there is no data available it says 'No Data', is there a way to change that text to something else for example that 'No Data' rename to something else?

here is example code:

 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Select } from 'antd'; const { Option } = Select; function onChange(value) { console.log(`selected ${value}`); } function onBlur() { console.log('blur'); } function onFocus() { console.log('focus'); } function onSearch(val) { console.log('search:', val); } ReactDOM.render( <Select showSearch style={{ width: 200 }} placeholder="Select a person" optionFilterProp="children" onChange={onChange} onFocus={onFocus} onBlur={onBlur} onSearch={onSearch} filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 } > </Select>, document.getElementById('container'), );

Answer 1

The notFoundContent property will work, but it's a legacy property (still supported).

<Select notFoundContent="No people avaialable"></Select>

There is a closed GitHub ticket ( #23064 ) that explains workarounds and the correct way. You need to wrap your <App> or the component in question ie <Select> with a <ConfigProvider> and set the renderEmpty prop function. The API explains the usage of renderEmpty .

Property	Description	Type	Default	Version
renderEmpty	Set empty content of components. Ref Empty	function(componentName: string): ReactNode	-

import { ConfigProvider, Select } from "antd";

// ...

<ConfigProvider renderEmpty={() => "No people avaialable"}>
  <Select></Select>
</ConfigProvider>

Answer 2

Use the property notFoundContent

Information on how to use it can be found in the ant design select API documentation under the title:

Select props

https://ant.design/components/select/#API

Here is an example of how it can be used:

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }


    notFoundContent={"Something Else"}


  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>,
  document.getElementById("container")
);

A working example can be found here: https://stackblitz.com/edit/react-gtuzeh?file=index.js

Answer 3

You can render component.

<Select notFoundContent={<div>No Data</div>}></Select>