CODEWITHSUNDEEP
reactjscomponentsrendering
Anar-Erdene
Anar-Erdene

Reputation: 1

ReactJS Best way to conditional rendering component with props

Now my Container looks like this. But i don't think it's best way.

renderAddForm() {
  if (!this.props.isFetching) {
    return <div>loading</div>;
  }
  return <AddForm {...this.props} />;
}

render() {
  return (
    <Layout>
      <PageHeader title="Ангилал нэмэх" button="Хадлгалах" href="#" />
      {this.renderAddForm()}
    </Layout>
  );
}

Upvotes: 0

Views: 365

Answers (1)

Pietro
Pietro

Reputation: 1836

Your solution it's fine. Another way could be inline:

render() {

  let { isFetching } = this.props

  return (
    <Layout>
      <PageHeader title="Ангилал нэмэх" button="Хадлгалах" href="#" />
      {isFetching ? <div>loading</div> : <AddForm {...this.props} />}
    </Layout>
  );
}

Upvotes: 3

Related Questions