ReactJS Best way to conditional rendering component with props

Question

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>
  );
}

Pietro · Accepted Answer · 2017-10-06 13:47:56Z

3

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>
  );
}

answered Oct 6, 2017 at 13:47

Pietro

1,8362 gold badges29 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nbkhope Over a year ago

I think the OP solution is totally fine. I would advice against inlining things, as it may get messy and hard to visualize.

Pietro Over a year ago

In this case I don't find that inline is messy at all

Collectives™ on Stack Overflow

ReactJS Best way to conditional rendering component with props

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related