Passing an additional parameter with an onChange event
When you are writing this:
<fieldset onChange={this.props.handleChange("tags")}>
handleChange
will be called immediately as soon as render is triggered.
Instead, do it like this:
<fieldset onChange={(e) => this.props.handleChange("tags", e)}>
Now the handleChange
will be called when onChange
handler is called.
In your handle event use double arrow function, there's no need to bind when using arrow function:
handleChange = tags => (event) => {
console.log(tags);
console.log(event.target.value);
}
And in the Child:
<fieldset onChange={this.props.handleChange("tags")}>
<div>Tag 1: <input id="tag1" value={tags[0]} /></div>
<div>Tag 2: <input id="tag2" value={tags[1]} /></div>
<div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>