CopyPastor

Detecting plagiarism made easy.

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

Possible Plagiarism

Plagiarized on 2020-10-29
by Grant Herman

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;

So I'm not entirely sure what you are doing. So first, the reason why 'a' is the only thing showing up is that you are hard coding that every time you run the loop you are just resetting that key on the object. From what I can understand is that you are iterating over the object incorrectly.
What I think you are doing is iterating over the object and then rendering an object and then rendering the values of that key within the object.
Let me know if the below answers your question.
You can see the code working here: https://codesandbox.io/s/elastic-dhawan-01sdc?fontsize=14&hidenavigation=1&theme=dark
Here is the code sample. <!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React from "react"; import "./styles.css"; const genres = { Rock: { album1: "Hello", album2: "Rock 2" }, Jazz: { album1: "", album2: "" }, Pop: { album1: "", album2: "" } };
const createListFromObject = (key) => { return ( <div> <h1>{key}</h1> <ul> {Object.entries(genres[key]).map(([k, v], idx) => ( <li key={`${key}-${k}-${v}-${idx}`}>{`Key: ${k} Value ${v}`}</li> ))} </ul> </div> ); }; export default function App() { return ( <div className="App">{Object.keys(genres).map(createListFromObject)}</div> ); }

<!-- 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>

<!-- 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="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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax [2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

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