Skip to content
This repository has been archived by the owner on Sep 20, 2018. It is now read-only.

FIXED: README.md code sample in "'ref' style querying" section. #18

Merged
merged 2 commits into from
Jan 14, 2016

Conversation

ctrlplusb
Copy link
Contributor

Running the current example:

let Greeting = props => <div>hello <strong _testID='name'>{props.name}</strong></div>;

$(Greeting).render()
  .prop({ name: 'Betty' })
  .find('[_testID=name]')
  .text()
  .should.equal('Betty')

Results in the following error:

Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.
      at invariant (node_modules/fbjs/lib/invariant.js:39:15)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:505:89)
      at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:570:23)
      at Object.wrapper [as render] (node_modules/react/lib/ReactPerf.js:66:21)
      at render (node_modules/teaspoon/utils.js:101:40)
      at QueryCollection.render (node_modules/teaspoon/element.js:110:20)
      at Context.<anonymous> (_test.js:25:19)

The initial fix for this (component -> element) is:

let Greeting = props => <div>hello <strong _testID='name'>{props.name}</strong></div>;

$(<Greeting />).render()
  .prop({ name: 'Betty' })
  .find('[_testID=name]')
  .text()
  .should.equal('Betty')

But this still produces the following error:

TypeError: (0 , _teaspoon2.default)(...).render(...).prop is not a function
      at Context.<anonymous> (_test.js:26:10)

I eventually guessed the following, which works:

let Greeting = props => <div>hello <strong _testID='name'>{props.name}</strong></div>;

$(<Greeting />)
  .props({ name: 'Betty' })
  .render()
  .find('[_testID=name]')
  .text()
  .should.equal('Betty')

@ctrlplusb
Copy link
Contributor Author

Related to #15

@@ -253,8 +253,9 @@ component's "real" props. In this example lets use `_testID`.
```js
let Greeting = props => <div>hello <strong _testID='name'>{props.name}</strong></div>;

$(Greeting).render()
.prop({ name: 'Betty' })
$(<Greeting />)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, tho I think the thing would be to do $(<Greeting name='Betty' />) for the example as its a bit simpler

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Too true. :) I'll make that change.

I do think there exists some confusion about the .prop vs .props still though. Might be worth reviewing the other sections too.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya I just fixed that in the readme so it shouldn't be a problem I hope

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, sorted my side too.

Thanks for this awesome library. I've been waiting a long time for this to come along.

jquense added a commit that referenced this pull request Jan 14, 2016
FIXED: README.md code sample in "'ref' style querying" section.
@jquense jquense merged commit 2587e23 into jquense:master Jan 14, 2016
@jquense
Copy link
Owner

jquense commented Jan 14, 2016

thanks for the help!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants