Dynamically render react component based on parent state

Question

My parent component, basically a form, has a child, an overlay with a loader, which only has to be displayed based on parent's state.

import React from 'react';
import Overlay from './overlay';

export default class RegisterForm extends React.Component {
  constructor {
    this.state = {
      loading: false
    };
  }
  handleSubmit(){
    this.state.loading = true;
    ...
  }

  render(){
    return(
    <form onSubmit={() => this.handleSubmit()}>
     ...
     <Overlay />
    </form>
    );
  }
}

How can I achieve this?

I tried React.cloneElement(<Overlay />, {}) but I don't know how to re-append this child to the parent and as I understand, it's not the React-way of doing things...

I also tried setting a prop ob Overlay based on state of the parent, like React.cloneElement(<Overlay />, { visible = this.state.loading }) but cannot seem to get it to work...

Season · Answer 1 · 2016-09-26T14:45:31.003

I would prefer the expression below than a ternary operator for the case in question

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      { this.state.loading == false && <Overlay /> }
    </form>
  );
}

Remember not to miss a return clause in the render function. Remember not to change state by assignment directly. Here is a working component that submits the form by clicking a button, and displays a loading message. This is a typical React way to achieve the behavior.

class HelloWidget extends React.Component{
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this)
    this.state = {
      loading: false
     };
  }
  handleSubmit() {
    this.setState({ loading: true });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        { this.state.loading && <div>loading...</div> }
        <button>click</button>
       </form>
     );
  }
}

Appendix - Below are two shorthand tricks.

Ternary operator:

Shorthand

render() {
  return condition === someCondition ? <CompA /> : <CompB />;
}

Longhand

render() {
  if ( condition === someCondition ) {
    return <CompA />;
  } else {
    return <CompB />;
  }
}

Boolean AND operator &&:

Shorthand

render() {
  return condition === someCondition && <CompA />;
}

Longhand

render() {
  if ( condition === someCondition ) {
    return <CompA />;
  } else {
    return null;
  }
}

Thanks! I tried `this.state.loading && ` but nothing happened... — afkatja, Sep 26 '16 at 14:09
Did you bind the handle in the constructor? `this.handleSubmit = this.handleSubmit.bind( this );` — Season, Sep 26 '16 at 14:14
I edited the question: my submit handler is done like this `onSubmit={() => this.handleSubmit()}` — afkatja, Sep 26 '16 at 14:24
Okay, then. Has the render function contained a `return` clause already? — Season, Sep 26 '16 at 14:31
Yes, sorry I didn't mention it at once. I updated the question. — afkatja, Sep 26 '16 at 15:23

Shubham Khatri · Accepted Answer · 2016-09-26T14:34:21.483

4

Make use of ternary operator to render you component. React JSX supports If-else logic for rendering like {(this.state.loading == false) ? <Overlay /> : null}

You should use this.setState({loading: true}); to change state instead of a direct assignment. Also use event.preventDefault() in your handleSubmit();

import React from 'react';
import Overlay from './overlay';

export default class RegisterForm extends React.Component {
  constructor {
    this.state = {
      loading: false
    };
  }
  handleSubmit(event){
   event.preventDefault();
    this.setState({loading: true});
    ...
  }

  render(){
    <form onSubmit {()=>{this.handleSubmit()}>

     {(this.state.loading == false) ? <Overlay /> : null}
    </form>
  }
}

edited Sep 26 '16 at 14:34

answered Sep 26 '16 at 13:31

Shubham Khatri

270,417
55
406
400

Unfortunately, this does not work either. I tried `{(this.state.loading == true) ? : null}` and `{(this.state.loading) ? : null}` and `{this.state.loading && }` – afkatja Sep 26 '16 at 14:21
use event.preventDefault in your handleSubmit. Check the updated answer – Shubham Khatri Sep 26 '16 at 14:31
I already had this in my original code; omitted in question (thought it was irrelevant?) – afkatja Sep 26 '16 at 15:24
`this.setState()` instead of directly assigning `this.state` was the clue. I would love to understand why... Thank you! – afkatja Sep 27 '16 at 06:14
1

Here is a good explanation on why you should use this.setState instead of this.state http://stackoverflow.com/questions/35867038/what-the-difference-of-this-state-and-this-setstate-in-reactjs – Shubham Khatri Sep 27 '16 at 06:17
And yeah Happy to Help :) – Shubham Khatri Sep 27 '16 at 06:17

Dynamically render react component based on parent state

2 Answers2