React.Children.only expected to receive a single React element child

[jefffriesen]

If you try to recreate the example in the README, you get this error:

React.Children.only expected to receive a single React element child

The problem is that <Step> is taking text nodes in the example:

        <Scrollama onStepEnter={this.onStepEnter}>
          <Step data={1} key='1'>
            step 1
          </Step>
          <Step data={2} key='2'>
            step 2
          </Step>
        </Scrollama>

However, if you replace the text nodes any element, then everything works correctly:

        <Scrollama onStepEnter={this.onStepEnter}>
          <Step data={1} key='1'>
            <div>step 1</div>
          </Step>
          <Step data={2} key='2'>
            <div>step 2</div>
          </Step>
        </Scrollama>

React.Children.only(children) throws with a text node: https://github.com/jsonkao/react-scrollama/blob/master/src/Step.js#L25

I don't know if you want to allow text nodes, or update the README to wrap the text in elements.

[squirrelsquirrel78]

Thank you, this is really helpful. I will work on allowing text nodes.

[lita-jerry]

Has this problem been solved? How can I solve this problem? Thank’s

[jefffriesen]

Adding a related example:

This works:

        <Scrollama onStepEnter={this.onStepEnter}>
          <Step data={1} key='1'>
            <div>
              <MyComponent />
             </div>
          </Step>
        </Scrollama>

This throws:

        <Scrollama onStepEnter={this.onStepEnter}>
          <Step data={1} key='1'>
             <MyComponent />
          </Step>
        </Scrollama>

Uncaught (in promise) TypeError: Cannot read property 'offsetHeight' of null
at Step.updateOffsetHeight

It would be nice to not have to wrap all components inside each Step

[squirrelsquirrel78]

The direct child of <Step> must be a DOM element because React Scrollama uses a child's offsetHeight property to calculate the intersection margin. However, only HTMLElements have offsetHeight. That's why using a React component as a direct child of <Step> breaks the library.

For now, to use a custom React component inside <Step>, I recommend wrapping it with a <div> like so:

<Step>
  <div>
    <MyComponent />
  </div>
</Step>

I'm very open to hearing suggestions about how this can be resolved/improved. One solution could be that custom components could forward the ref to their DOM elements. React Scrollama could also check whether a child ref was a DOM element, and use findDOMNode() if it weren't. Both are unideal...

[squirrelsquirrel78]

(Note to self: See the wording on the error message Transitions can only be applied to DOM elements, not components from Svelte).

[inspectordanno]

@jsonkao OMG!! This was the error that I was having that confused me! Have to wrap the step-child (haha pun) in a <div> if it is a React component. Got it!

I wouldn't be unopposed to having a ref exposed that I could forward to a custom component.

[maerzhase]

You can use custom components but you have to handle ref forwarding. This is all not specifics to the lib but basics on how react works

https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components

[inspectordanno]

@maerzhase But isn't the issue that <Step/> needs a way to accept a ref? The ref needs to be defined in the user code, but then forwarded along to the <Step/> component. This would involve changing the library.

[maerzhase]

I am not sure what you mean by that. The step component is actually creating a ref for each step, thats why the child either needs to be a html element or a custom component that uses ref forwarding.

If your "MyComponent" would use ref forwarding you wouldn't need to wrap a div around it.