CopyPastor

Detecting plagiarism made easy.

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

Possible Plagiarism

Plagiarized on 2019-06-01
by zynkn

Original Post

Original - Posted on 2019-05-04
by Ori Drori



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





<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const {useMemo, useState, useRef} = React const DATA = { 1:{name: 'John', children: ['Smith','Mary','Chris']}, 2:{name:'Ama', children: ['Natalia','Obama']} };
const List = ()=>{ const generateList = useMemo(() => { let arr = []; for (let i in DATA) { arr.push(<Item key={i} id={i} {...DATA[i]} /> ); } return arr; }, [DATA]) return ( <ul>{generateList}</ul> ); }
const Item = (props) =>{
const [isShow, setIsShow] = useState(false); const [name, setName] = useState(props.name); const toggle = () => setIsShow(!isShow) const handleClick = (e,name) => { e.stopPropagation(); setName(name); toggle(); } return( <React.Fragment> <li onClick={toggle}> <p>{props.name}</p> {props.children.map((i,j)=>(<button key={j} onClick={(e)=>handleClick(e,i)} >{i}</button>))} </li> <Modal visible={isShow} toggle={toggle} name={name}/> </React.Fragment> ); } const Modal = (props) => { const prevName = useRef(props.name); const [name, setName] = useState(props.name);
if(prevName.current !== props.name){ prevName.current=name; setName(props.name) };
return props.visible ? ReactDOM.createPortal( <React.Fragment> <div className="dimmer"/> <div className="modal"> <input type="text" value={name} onChange={(e)=>setName(e.target.value)} /> <button onClick={props.toggle}>close</button> </div> </React.Fragment>, document.getElementById("modal") ) : null }

ReactDOM.render( <List/>,document.getElementById('root') )
<!-- language: lang-css -->
.dimmer{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.16); }
.modal{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: white; width: 200px; height: 120px; } li:hover{ background-color: #f0f0f0; cursor: pointer; }
<!-- language: lang-html -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div> <div id="modal"></div>
<!-- end snippet -->
I solved it using `useRef()`.
const Modal = (props) => { const prevName = useRef(props.name); const [name, setName] = useState(props.name); if(prevName.current !== props.name){ prevName.current=name; setName(props.name) }; return props.visible ? ReactDOM.createPortal( <React.Fragment> <div className="dimmer"/> <div className="modal"> <input type="text" value={name} onChange={(e)=>setName(e.target.value)} /> <button onClick={props.toggle}>close</button> </div> </React.Fragment>, document.getElementById("modal") ) : null }

Create a generator of button/label pairs with their local state and step. Generate the buttons and labels, and render them:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const useGenerateButtonAndLabel = step => { const [counter, mySetCounter] = React.useState(0); const onclick = React.useCallback( () => mySetCounter(counter + step), [step, counter] );
return [ <button onClick={onclick}>+{step}</button>, <label>&nbsp;&nbsp;&nbsp;&nbsp;{counter}</label> ]; };
function App(props) { const [button1, label1] = useGenerateButtonAndLabel(5); const [button2, label2] = useGenerateButtonAndLabel(10); const [button3, label3] = useGenerateButtonAndLabel(15);
return ( <div> {button1} {button2} {button3} <br /> {label1} {label2} {label3} </div> ); }
ReactDOM.render(<App />, document.getElementById('demo'));
<!-- language: lang-html -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>
<!-- end snippet -->
If you also need a total, each generated pair can also return it's current `counter`, and you can sum them in the parent. In this example, I also automate the items creation/rendering with `Array.from()`, map, and reduce.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const useGenerateButtonAndLabel = step => { const [counter, mySetCounter] = React.useState(0); const onclick = React.useCallback( () => mySetCounter(counter + step), [step, counter] ); // step is used here is a key, but if step is not unique, it will fail. You might want to generate a UUID here return [ <button key={step} onClick={onclick}>+{step}</button>, <label key={step}>&nbsp;&nbsp;&nbsp;&nbsp;{counter}</label>, counter ]; };
const sum = items => items.reduce((r, [,, counter]) => r + counter, 0);
function App(props) { const items = Array.from({ length: 5 }, (_, i) => useGenerateButtonAndLabel(5 * (i + 1)) );
return ( <div> {items.map(([button]) => button)} <br /> {items.map(([, label]) => label)} <div>Total: {sum(items)}</div> </div> ); }
ReactDOM.render(<App />, document.getElementById('demo'));
<!-- language: lang-html -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>
<!-- end snippet -->


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