CopyPastor

In React you don't manipulate DOM directly and you don't mutate the state (`arrayToSort[i] = arrayToSort[j]` for example). You change the model (state, props), and the view changes accordingly.
So in your case, you need to include in the state, the array of column values (`arrayToSort`), the array of pairs to swap (`sortedArrayAnim`), and a Set of previous changed values (`prevChanged`). Whenever something changes, the view will update according to those state values.
Demo (see comments in code):


const NORMAL_COLOR = 'white'; const CHANGED_COLOR = 'red'; const AFTER_CHANGE_COLOR = 'orange';
/** this function return the color **/ const getColor = (idx, prevChanged, [current]) => { if(current && current.includes(idx)) return CHANGED_COLOR; // if it's in current changed pair [i, j]
if(prevChanged.has(idx)) return AFTER_CHANGE_COLOR; // if it was changed before return NORMAL_COLOR; }
class SortingVisualizer extends React.Component { state = { arrayToSort: [], sortedArrayAnim: [], prevChanged: new Set() }; timeout = null;
componentDidMount() { this.resetArray(); }
resetArray = () => { clearTimeout(this.timeout); const arrayToSort = []; for (let i = 0; i < 50; i++) { arrayToSort.push(this.RandomIntBetweenRange(1, 100)); } this.setState({ arrayToSort, sortedArrayAnim: [], prevChanged: new Set() }); } animate = () => { this.setState( ({ sortedArrayAnim: [current, ...sortedArrayAnim], // separate the 1st pair (current) from the rest prevChanged, arrayToSort }) => { const newArrayToSort = [...arrayToSort]; // clone newArrayToSort /** flip the values according to current change [i, j] **/ newArrayToSort[current[0]] = arrayToSort[current[1]]; newArrayToSort[current[1]] = arrayToSort[current[0]]; return ({ arrayToSort: newArrayToSort, sortedArrayAnim, prevChanged: new Set([...prevChanged, ...current]) // add changed items to the Set }); }, () => { // when state change is done const { sortedArrayAnim } = this.state;
// if there are more items to change wait and call animate again if(sortedArrayAnim.length) { this.timeout = setTimeout(this.animate, 1000); } } ); }
insertionSort = () => { const sortedArrayAnim = [[1, 5], [10, 15], [20, 13], [17, 48], [20, 13], [45, 17]]; // InsertionSort(this.state.arrayToSort); // I've used a dummy array this.setState({ sortedArrayAnim }, this.animate); // update sortedArrayAnim and call animate when done }
render() { const { arrayToSort, sortedArrayAnim, prevChanged } = this.state;
return ( <div className="main-div"> {arrayToSort.map((value, idx) => ( <div className="array-item" key={idx} style={{ height: `${value}vh`, backgroundColor: getColor(idx, prevChanged, sortedArrayAnim) }}>
</div> ))}
<button onClick={this.resetArray}>Generate new array</button> <button onClick={this.insertionSort}>Insertion Sort</button> </ div> ); }
RandomIntBetweenRange(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } }
ReactDOM.render( <SortingVisualizer />, root );

.main-div { display: flex; align-items: flex-end; justify-content: space-between; background: black; height: 100vh; padding: 1vmax; box-sizing: border-box; }
.array-item { width: 1vw; }
button { align-self: flex-start; }
body { margin: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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 along 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 — the good kind — for putting a `children` property in the opening tag. Example:


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") );

.first { color: green; } .second { color: blue; }

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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 — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => { return {foo: {...prevState.foo, a: "updated"}}; });
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:


const obj = { foo: { a: 1, b: 2, c: 3 } }; console.log("original", obj.foo); // Creates a NEW object and assigns it to `obj.foo` obj.foo = {...obj.foo, a: "updated"}; console.log("updated", obj.foo);


.as-console-wrapper { max-height: 100% !important; }


[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax [2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

CopyPastor

Possible Plagiarism

Original Post