How to add custom components into Ant Design stepper?

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.

score 4 · Accepted Answer · answered Nov 22 '19 at 19:23

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.

score 1 · Answer 2 · answered Nov 18 '21 at 03:41

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.

How to add custom components into Ant Design stepper?

2 Answers2