Stack Overflow Asked on November 18, 2021
I am trying to show the horizontal line <hr>
tag, when the conditions render for second time. For example, When the data renders first time, I dont want the <hr>
tag, but as it renders the second time, I expect hr tag to come between the two data’s. I tried but couldn’t find anything. Can anyone help me with this
{
this.props.details && this.props.details.length > 0
? this.props.details.map((data) => (
<>
<div>{data} </div>
</>
))
: null;
}
You can simply maintain a state say isSecondRender
and set it to false. In componentDidMount, you can set it to true(i.e. 2nd render).
In jsx, you can conditionally render hr
tag.
code snippet
class MyComp extends React.Component {
state = {
isSecondRender: false
};
componentDidMount() {
this.setIsSecondRender();
}
setIsSecondRender = () => {
setTimeout(
() =>
this.setState(prev => ({
...prev,
isSecondRender: !prev.isSecondRender
})),
3000
);
};
render() {
return this.props.details && this.props.details.length > 0 ? (
<>
{!this.state.isSecondRender
? "first time rendering"
: "second time rendering done"}
{this.props.details.map(data => (
<>
<div> {data} </div>
{this.state.isSecondRender && <hr />}
</>
))}
</>
) : null;
}
}
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<MyComp details={["data-1", "data-2"]} />
</div>
);
}
Answered by gdh on November 18, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP