Setting variable to React component not working

Question

This code uses React version 0.14.

I am trying to set a var to a react component and return it. My eventual goal is to use a switch to assign different components based on some props. This is the part of my render statement not working:

var inputNumber = <InputNumber displayText={this.props.data.DisplayText} />;
return (
    {inputNumber}
);

This replacement code evaluates fine:

return (
    <InputNumber displayText={this.props.data.DisplayText}/>
);

This is the error message I get (InputDataItem is the component the above snippet is from):

Uncaught Error: Invariant Violation: InputDataItem.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Clearly I have a gap in my syntax understanding.

I based my assumption on this working off of this part of the React documentation (4th code example): https://facebook.github.io/react/tips/if-else-in-JSX.html

romseguy · Accepted Answer · 2015-12-04 00:40:32Z

3

It should be:

return (
  <div>
    {inputNumber}
  </div>
);

or simply:

return inputNumber;

answered Dec 4, 2015 at 0:40

romseguy

1,56313 silver badges17 bronze badges

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

1 Comment

Justin K Over a year ago

I knew it'd be something simple. Thanks a bunch.

Felix Kling · Accepted Answer · 2015-12-04 00:51:16Z

2

The {...} are only special inside JSX. In

return (
    {inputNumber}
);

there is no JSX. The {...} denote an object literal, even though it might not seem like one to you. What's new in ES2015 is something called short object notation, which allows you to omit the key. Your code is equivalent to

return (
    {inputNumber: inputNumber}
);

Either just return the inputNumber or put {...} inside JSX, as the other answer suggets.

answered Dec 4, 2015 at 0:51

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

Setting variable to React component not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related