All you should need is the `react` and `react-dom` scripts like you already have, a root element like the `div` with id `root` you have, and a file which uses `ReactDOM` to render the topmost component into the root element.
**Example**
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
ReactDOM.render(
React.createElement('h1', {}, 'Hello, World'),
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) but i'm surprised no one has mentioned [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: false console: true babel: true -->
<!-- language: lang-js -->
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const someArr = ["A", "B", "C", "D"];
class App extends React.Component {
constructor(props) {
super(props);
this.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 style={styles}>
{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>
);
}
}
ReactDOM.render( < App / > , 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 -->
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.
[1]: https://www.sitepoint.com/currying-in-functional-javascript/
