TransWikia.com

Show horizontal line only when condition runs for second time in Reactjs

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;
}
conditional renderingcssjavascriptreactjstypescript

One Answer

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.

Working demo

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

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP