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 i.e. <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>