React - Wrapping Parent and Direct Child Components

Question

Project Setup

I have a project created with create-react-app and have antd (Ant Design) installed and configured.

Problem

Consider the <Steps> component and its <Steps.Step> child component from Ant Design.

From the official documentation, we render a multi-step component this way:

<Steps>
    <Steps.Step />
    <Steps.Step />
    <Steps.Step />
</Steps>

Note: I find that wrapping the <Steps.Step> components into a single <div> will not work. The steps will not be displayed on the web page.

<Steps>
    <div class="not-working">
        <Steps.Step />
        <Steps.Step />
        <Steps.Step />
    </div>
</Steps>

So the structure must be <Steps.Step> components as direct children of <Steps>.

Now I want to wrap each of these components into a self-defined React component as follows.

MySteps.js:

import "Steps" from "antd";

export default class MySteps extends Component {
    render() {
        return <Steps>{this.props.children}</Steps>
    }
}

MyStep.js:

import "Steps" from "antd";

export default class MyStep extends Component {
    render() {
        return <Steps.Step></Steps.Step>
    }
}

Then rewrite the above code as the following:

<MySteps>
    <MyStep />
    <MyStep />
    <MyStep />
</MySteps>

However, the result is that, React generates something similar to the following:

...
    <Steps>
        <MyStep>
            <Step></Step>
        </MyStep>
    </Steps>
...

Question

What can I do to eliminate the wrapper but at the same time, being able to reuse and wrap a component written by the others without affecting the resulting structure?

Answer 1

Problem is not that you are wrapping in your component but the problem is that you are not passing props to Steps.Step. If you pass all the props to Steps.Step inside MyStep it will work.

import "Steps" from "antd";

export default class MyStep extends Component {
    render() {
        return <Steps.Step {...this.props} ></Steps.Step>
    }
}

Here is working codesandbox: https://codesandbox.io/s/antd-reproduction-template-3ytn7