CopyPastor

Detecting plagiarism made easy.

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

Possible Plagiarism

Plagiarized on 2019-02-22
by Tholle

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;

Instead of having the state in `CountryFieldRow` and trying to sync that to the component state, you could keep all the state in the parent component and pass down state-altering functions to `CountryFieldRow` instead.
**Example**
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class App extends React.Component { state = { rows: [ { country: "Andorra", destination: "www.alpha.com" } ] };
addRow = () => { this.setState(prevState => ({ rows: [...prevState.rows, { country: "", destination: "" }] })); };
onChangeCountry = (country, index) => { this.setState(prevState => { const rows = [...prevState.rows]; rows[index] = { ...rows[index], country }; return { rows }; }); };
onChangeDestination = (destination, index) => { this.setState(prevState => { const rows = [...prevState.rows]; rows[index] = { ...rows[index], destination }; return { rows }; }); };
render() { return ( <div> {this.state.rows.map((row, i) => ( <CountryFieldRow country={row.country} onChangeCountry={e => this.onChangeCountry(e.target.value, i)} destination={row.destination} onChangeDestination={e => this.onChangeDestination(e.target.value, i) } /> ))} <button onClick={this.addRow}> Add another </button> </div> ); } }
function CountryFieldRow(props) { return ( <div> <input value={props.country} onChange={props.onChangeCountry} /> <input value={props.destination} onChange={props.onChangeDestination} /> </div> ); }
ReactDOM.render(<App />, document.getElementById("root"));
<!-- language: lang-html -->
<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>
<!-- end snippet -->
That's *property spread notation*. It was added in ES2018, but long-supported in React projects via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" 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="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>
<!-- 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: {...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"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
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);

<!-- language: lang-css -->
.as-console-wrapper { max-height: 100% !important; }
<!-- end snippet -->
[1]: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx

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