Customize Antd AutoComplete to use {children} for both dataSource and input

Question

Can I customize both 1) dataSource and 2) input when using {children} approach?

Docs say:

children (for customize input element)
customize input element
HTMLInputElement / HTMLTextAreaElement / React.ReactElement

children (for dataSource)
Data source for autocomplete
React.ReactElement / Array

I got it working using one or the other but not both. Really annoying that is no renderOption attribute or something similar...

Answer 1

If you want to use both, you can write something like this:

const results = dataSource.map(x => (
  <Select.Option key={x} {/* props you want */}>{x}</Option>
))

<AutoComplete dataSource={results}>
  <Search placeholder="Search..." />
</AutoComplete>