Detecting plagiarism made easy.

Score: 1; Reported for: Exact paragraph match Open both answers

Possible Plagiarism

Plagiarized on 2023-03-17
by Jose Miguel Arroyave

Original Post

Original - Posted on 2015-06-25
by T.J. Crowder

Present in both answers; Present only in the new answer; Present only in the old answer;

Well, this is how I solved it...
First of all the problem is caused by something called "stale closures" and it's an issue of lost references between re-renders.
Read more on this links
- -

To solved it I rewrote the component as a Class Component,

<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<script src=""></script> <script src=""></script> <div id="root"></div>
<script type="text/babel" defer> const { useEffect, useRef, useState, useCallback } = React;
const visibilityThreshold = 0.5 class IntersectionObserverTest extends React.Component{ constructor( props ){ super(props) this.state = { data: new Array(props.itemsCount ?? 10).fill(null).map( (a, i) => `item ${i}`), visible: [], } this.scrollDiv = React.createRef( ) this.itemsRef = React.createRef() this.itemsRef.current = [] this.onInteraction = this.onInteraction.bind(this) } componentDidMount(){ this.itemsRef.current = this.itemsRef.current.slice(0,; const observer = new IntersectionObserver( this.onInteraction, { root: this.scrollDiv.current, threshold: visibilityThreshold, }) for( var i = 0; i <; i++ ){ observer.observe( this.itemsRef.current[i] ) } console.log("INITIALIZED") } onInteraction(entries, opts){ console.log("visible:", this.state.visible) var onView = [ ...this.state.visible ] entries.forEach( e => { const key ='itemKey') const t = e.intersectionRatio console.log(key, t) if( t < visibilityThreshold ){ onView = onView.filter( k => k != key ) } else { onView.push( key ) } }) this.setState( { visible: onView } ) } render( ){ const { data } = this.props return <> <div ref={this.scrollDiv} style={{width: '100%', overflow: 'scroll'}}> <div style={{ display: 'flex', flexDirection: 'row' }}> { (d, di) => <div ref={el => this.itemsRef.current[di] = el} style={{ display: 'block', minWidth: '200px', width: '200px', border: '1px solid black', padding: '1rem', textAlign: 'center'}} key={di} itemKey={`item-${di}`} > {d} </div> )} </div> </div> <div> on view: <div>{ v => <div key={v}>{v} </div>)}</div> </div> </> } }

const rootElement = document.getElementById("root"); ReactDOM.render(<IntersectionObserverTest />, rootElement); </script>
<script src=""></script> <script src=""></script> <script src=""></script>
<!-- end snippet -->

That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar&nbsp;&mdash; the good kind&nbsp;&mdash; for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component { render() { const { className, children } = this.props; return ( <div className={className}> {children} </div> ); } } ReactDOM.render( [ <Example className="first"> <span>Child in first</span> </Example>, <Example className="second" children={<span>Child in second</span>} /> ], document.getElementById("root") );
<!-- language: lang-css -->
.first { color: green; } .second { color: blue; }
<!-- language: lang-html -->
<div id="root"></div>
<script src=""></script> <script src=""></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object&nbsp;&mdash; which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => { return {foo: {, a: "updated"}}; });
That replaces `` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = { foo: { a: 1, b: 2, c: 3 } }; console.log("original",; // Creates a NEW object and assigns it to `` = {, a: "updated"}; console.log("updated",;

<!-- language: lang-css -->
.as-console-wrapper { max-height: 100% !important; }
<!-- end snippet -->

[1]: [2]:

Present in both answers; Present only in the new answer; Present only in the old answer;