How to pass functions in Steps in antD? - reactjs

Question

code: https://codesandbox.io/s/switch-step-ant-design-demo-forked-cwcp8?file=/index.js
I have two doubts:
How do I pass functions (content1(), content2()) inside the content?
How do I restrict the Next Button, (to be performed only when a certain condition gets fulfilled in
the present page)

Answer 1

To your first doubt
You are returning jsx so you can render it by just doing <content1 />. I suggest make it a component outside your class component. Make it also the first letter capital:
const Content1 = ({ onClick }) => {
return (
<div>
<div>Content 1</div>
<button onClick={onClick}>Click me to go to content 2</button>
</div>
);
};
class App extends React.Component {
state = {
current: 0,
step: [
{
title: "First",
content: <Content1 onClick={() => this.click()} />
},
{
title: "Second",
content: <Content2 />
},
{
title: "Last",
content: <Content3 />
}
],
isPageOneOk: false
...
};
To your second doubt
Just track the current state on your next function and just increment the current state if a condition fulfilled:
click = () => {
alert("you can go now to content 2");
this.setState({
isPageOneOk: true
});
};
next = () => {
const {current, isPageOneOk} = this.state;
if (current === 0 && !isPageOneOk) {
alert("Can't go to next page")
} else {
//increment current state to go to next content
const current = this.state.current + 1;
this.setState({ current });
}
};
Take note that on each step, current content will unmount to the dom.
Here's the complete sample code: