How to add custom components into Ant Design stepper? - reactjs

Question

I'm new to AntD and having a little trouble with the stepper component - specifically, how to add a custom component into each of the steps.
For example,
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
For simplicity, if I were to use the Autocomplete component would it be just:
{
title: 'First',
content: '<Autocomplete />',
},
No luck so far. Any advice is appreciated.

Answer 1

There is no content in Steps.Step.
You may be trying to render a custom component in Steps, then you need to provide ReactNode and not a string type:
<Steps>
<Steps.Step> title="Finished" description={<AutoComplete/>} />
</Steps>
Its all mentioned in the docs, I believe what you need is the basics of React.

Answer 2

Maybe you found this official example Switch Step, there is a steps variable like this:
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
This is a user-defined variable, NOT pre-defined by antd, you can use whatever property even data structure you want. You can assign the ReactNode to content property like:
const steps = [
{
title: 'First',
content: <Autocomplete />,
},
// ...
]
And render the content based on current step state:
<div className="steps-content">{steps[current].content}</div>
There is NO content prop for the Steps.Step component. This is another way different from the accepted answer.