CODEWITHSUNDEEP
javascripthtmlreactjsselectantd
user10727653
user10727653

Reputation:

Ant Design select tag no data rename

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

Upvotes: 4

Views: 7803

Answers (3)

Gucal
Gucal

Reputation: 923

You can render component.

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

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

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>

Upvotes: 5

Plaganomics
Plaganomics

Reputation: 21

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

Upvotes: 0

Related Questions