CopyPastor

Detecting plagiarism made easy.

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

Possible Plagiarism

Plagiarized on 2019-10-09
by Thilina Sampath

Original Post

Original - Posted on 2017-08-01
by Sagiv b.g



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

Please check below sample code. please apply to your system.


<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class TodoApp extends React.Component { constructor(props) { super(props); } handleclick(e) { console.log('e:', e) }; render() { return ( <div> <input type="button" onClick={() => {this.handleclick("abc")}} value="Button"/> </div> ) } }
ReactDOM.render(<TodoApp />, document.getElementById('root'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='root'></div>
<!-- end snippet -->

There are nice answers here, and i agree with @Austin Greco (the second option with separate components) There is another way i like, [currying][1]. What you can do is create a function that accept a parameter (your parameter) and returns another function that accepts another parameter (the click event in this case). then you are free to do with it what ever you want.
**ES5:**
handleChange(param) { // param is the argument you passed to the function return function (e) { // e is the event object that returned }; }
**ES6:**
handleChange = param => e => { // param is the argument you passed to the function // e is the event object that returned };
And you will use it this way:
<input type="text" onChange={this.handleChange(someParam)} />
Here is a full example of such usage:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
const someArr = ["A", "B", "C", "D"];
class App extends React.Component { state = { valueA: "", valueB: "some initial value", valueC: "", valueD: "blah blah" };
handleChange = param => e => { const nextValue = e.target.value; this.setState({ ["value" + param]: nextValue }); };
render() { return ( <div> {someArr.map(obj => { return ( <div> <label> {`input ${obj} `} </label> <input type="text" value={this.state["value" + obj]} onChange={this.handleChange(obj)} /> <br /> <br /> </div> ); })} </div> ); } }
const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
<!-- end snippet -->
Note that this approach doesn't solve the creation of a new instance on each render. I like this approach over the other inline handlers as this one is more concise and readable in my opinion.
**Edit:** As suggested in the comments below, you can cache / memoize the result of the function.
Here is a naive implementation:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
let memo = {};
const someArr = ["A", "B", "C", "D"];
class App extends React.Component { state = { valueA: "", valueB: "some initial value", valueC: "", valueD: "blah blah" };
handleChange = param => { const handler = e => { const nextValue = e.target.value; this.setState({ ["value" + param]: nextValue }); } if (!memo[param]) { memo[param] = e => handler(e) } return memo[param] };
render() { return ( <div> {someArr.map(obj => { return ( <div key={obj}> <label> {`input ${obj} `} </label> <input type="text" value={this.state["value" + obj]} onChange={this.handleChange(obj)} /> <br /> <br /> </div> ); })} </div> ); } }
const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root" />
<!-- end snippet -->

[1]: https://www.sitepoint.com/currying-in-functional-javascript/

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