CODEWITHSUNDEEP
javascriptreactjsswitch-statement
dczii
dczii

Reputation: 589

ReactJS switch case error Adjacent JSX elements must be wrapped in an enclosing tag

Im new to ReactJS so please be patient with me :)
I have 2 select field. Select 2 will show only selected option whenever I select an option from Select 1. here is my code for my switch

var partial;<br>
switch(this.state.pType){<br>
case 1:<br>
  partial = <MenuItem value={1} primaryText="Round Neck"  /> <MenuItem value={2} primaryText="test"  />;<br>
  break;<br>
case 2:<br>
  partial = <MenuItem value={2} primaryText="test"  />;<br>
  break;<br>
case 3:<br>
  partial = "asd";<br>
  break;<br>
}

and here is my return code

return(
  <div>
    <SelectField value={this.state.pType} onChange={this.handleP}>
      <MenuItem value={1} primaryText="Shirt" />
      <MenuItem value={2} primaryText="Jacket" />
      <MenuItem value={3} primaryText="Bag" />
    </SelectField>
    <Row>
      <Col xs={4}>
        Category
        <SelectField value={this.state.catType} onChange={this.handleCat} fullWidth="true">
          {partial}
        </SelectField>

Upvotes: 0

Views: 763

Answers (1)

WitVault
WitVault

Reputation: 24130

It is happening because any where in your code you are returning two elements simultaneously.

e.g

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

It should be wrapped in a parent element. e.g

 return(
      <div id="parent>
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

More Detailed Explanation

Your below jsx code get transformed 

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

into this

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
      );
    }
  }]);

But if you do this

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
       </div>Hi</div>
    );
  }
}

this gets converted into this(Just for illustration purpose,actually you will get error : Adjacent JSX elements must be wrapped in an enclosing tag)

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
       'Hi'
      ); 
    return React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
    }
  }]);

In the above code you can see that you are trying to return twice from a method call, which is obviously wrong.

Also you need to close your br tag. It should be <br/>

Upvotes: 1

Related Questions