Render a component multiple times React.js

Question

This is a code for a simple counter.

However, when i Render the view i don't get any output. Please tell me what is wrong with the code.

The button is pressed and a counter is incremented and is rendered onto the screen.

 var Title = React.createClass({

  getInitialState : function(){
    return {count:0};
  },
  increment : function(){

    this.setState({count:this.state.count+this.props.incVal});
  },
  render: function() {
    return (
      <div>
        <h1 >Count : {this.state.count}< /h1>
        <button onClick={this.increment} >Increment</button>
      </div>
    );
  }
});




var MultiButton = React.createClass({
  render : function (){
    return(
      <Title incVal={1}/>
      <Title incVal={5}/>
    );
  }
});

ReactDOM.render( <MultiButton /> ,
  document.getElementById('example')
);

Besides the correct answer by Rafael below, react does show nice error messages in to the browser console (opened by pressing F12 in most browsers). Might be a good practice to look at error logs in your browser console when something goes wrong. — Leone
– Leone, Commented Mar 27, 2017 at 12:31

Rafael Berro · Accepted Answer · 2017-03-27 12:13:35Z

1

From the official documentation.

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

A React component can't return multiple React elements, but a single JSX expression can have multiple children, so if you want a component to render multiple things you can wrap it in a div like this.

Change from

var MultiButton = React.createClass(
  {
    render: function () {
      return (
        <Title incVal={1}/>
        <Title incVal={5}/>
      );
    }
  }  
);

to

var MultiButton = React.createClass(
  {
    render: function () {
      return (
        <div>
          <Title incVal={1}/>
          <Title incVal={5}/>
        </div>
      );
    }
  }  
);

edited Mar 27, 2017 at 12:13

answered Mar 27, 2017 at 12:08

Rafael Berro

2,6011 gold badge20 silver badges25 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2017-03-27 13:15:08Z

0

You cannot return more than one elements from the React class. If you have more than one elements wrap them in a single div like

var MultiButton = React.createClass({
  render : function (){
    return(
      <div>
          <Title incVal={1}/>
          <Title incVal={5}/>
      </div>
    );
  }
});

answered Mar 27, 2017 at 13:15

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Naveed Aheer · Accepted Answer · 2017-03-27 14:21:43Z

0

 var Title = React.createClass({

  getInitialState : function(){
    return {count:0};
  },
  increment : function(){

    this.setState({count:this.state.count+this.props.incVal});
  },
  render: function() {
    return (
      <div>
        <h1 >Count : {this.state.count}< /h1>
        <button onClick={this.increment.bind(this)} >Increment</button>
      </div>
    );
  }
});




var MultiButton = React.createClass({
  render : function (){
    return(
      <Title incVal={1}/>
    );
  }
});

ReactDOM.render( <MultiButton /> ,
  document.getElementById('example')
);

answered Mar 27, 2017 at 14:21

Naveed Aheer

1,8456 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

Render a component multiple times React.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related