CODEWITHSUNDEEP
javascriptreactjs
Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

Render a component within another in React

When a state is changed, React triggers componentDidUpdate() method, and by then I do:

componentDidUpdate: function () {
  React.render(new SubmitButton, $('.uploader-submit').get(0));
}

As you saw, I'm rendering a SubmitButton when a specific state is changed, but my question is: is this the best behavior to get this feature done?

My scenario is: I'm uploading a photo. When the input[type=file] is changed, I create a new state property and then the componentDidUpdate() is triggered, invoking the SubmitButton.

This is my render() method:

render: function () {
  return (
    <div className="uploader">
      <header className="uploader-header">
        <div className="uploader-actions pull-left">
          <div className="uploader-submit"></div>
          <CancelButton router={this.props.router} />
        </div>

        <UploadButton callback={this.imageSelectedCallback} />
      </header>

      <Preview imageUri={this.state.imageUri} />
    </div>
  )
}

Couldn't I do something like the <Preview /> component? I mean, it is there, but something just appears when this.state.imageUri is different of null. This is the implementation of Preview:

var Preview = {
  render: function () {
    return (
      <img src={this.props.imageUri} />
    )
  }
};

module.exports = React.createClass(Preview);

Yes, I know — "Preview" is invisible by default because it is an image, but I want to know if there's another approach to reach what I want: to show something based on a state, using the render method.

Upvotes: 1

Views: 1638

Answers (2)

kraf
kraf

Reputation: 1309

React doesn't render falsy values, be it a component or an attribute (like in the Preview case), e.g.

<div>{null}</div>
<img src={null} />

renders to

<div></div>
<img/>

So typically you just create a variable and conditionally assign it a component or null as was also suggested in another answer:

var button = null;
if(myConditionForShowingButton) {
    button = <SubmitButton />;
}

-- or simply --

var button = myConditionForShowingButton ?
    <SubmitButton /> :
    null;

In cases where the component gets bigger it's typically more readable and cleaner to have a subroutine for rendering that part

var complexComponent = condition ?
    this.renderComplexComponent() :
    null

Upvotes: 2

reecer
reecer

Reputation: 86

Yes. If-Else in JSX.

render: function () {
  var submitButton;
  if (this.state.imageSelected)
    submitButton = <SubmitButton />;

  return (
    <div className="uploader">
      <header className="uploader-header">
        <div className="uploader-actions pull-left">
          <div className="uploader-submit">{ submitButton }</div>
          <CancelButton router={this.props.router} />
        </div>

        <UploadButton callback={this.imageSelectedCallback} />
      </header>

      <Preview imageUri={this.state.imageUri} />
    </div>
  )
}

Upvotes: 1

Related Questions