How to set state of multiple properties in one event handler (React) Pretty straight forwards really...I know that it's usually bad practice to repeat your code so I'm wondering how I could join handleAuthorChange() and handleContentChange() into one method. I guess it was hard for me to find a solution because I don't understand how I would know which part of the state I'm updating. I was thinking maybe embed a HTML id and check on the event target if IDs match but that seems pretty inefficient. Thanks in advance!

import React, { Component } from 'react';

class AddComment extends Component {
    state = {
        author: '',
        content: ''
    }

    handleAuthorChange = (e) =&gt; {
        this.setState({
            author: e.target.value
        });
    }

    handleContentChange = (e) =&gt; {
        this.setState({
            content: e.target.value
        });
    }

    handleSubmit = (e) =&gt; {
        e.preventDefault();
        this.props.addComment(this.state);
        this.setState({
            author: '',
            content: ''
        });

    }

    render() {
        return (
            &lt;div className="add-form"&gt;
                &lt;form onSubmit={ this.handleSubmit } className="card hoverable p-bottom"&gt;
                    &lt;p className="p-top"&gt;ADD COMMENT&lt;/p&gt;
                    &lt;input onChange={ this.handleContentChange } value={this.state.content} type="text" placeholder="comment" /&gt;
                    &lt;input id="name" onChange={ this.handleAuthorChange } value={this.state.author} type="text" placeholder="name" /&gt;
                    &lt;input value="submit" type="submit"/&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        )
    }
}

export default AddComment;
I find it fine as it is, but if you really want to keep a single method, you can parametrize it by the name of the key to set:

handleChange = (keyName, e) =&gt; { this.setState({ [keyName]: e.target.value }); }


and call it like handleChange('content', event) or handleChange('author', event).

Problem is, now, to call it properly when creating your components. You could write things like:

&lt;input onChange={(e) =&gt; this.handleChange('content', e)} value={this.state.content} type="text" placeholder="comment" /&gt;


But this syntax creates a new function each time the component is rendered, potentially triggering child re-render as well. React recommends to bind functions in the constructor instead:

import React, { Component } from 'react';

class AddComment extends Component {
    constructor(props) {
        super(props);
        this.state = { author: '', content: '' };
        this.handleAuthorChange = this.handleChange.bind(this, 'author');
        this.handleContentChange = this.handleChange.bind(this, 'content');
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(keyName, e) {
        this.setState({ [keyName]: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();
        this.props.addComment(this.state);
        this.setState({ author: '', content: '' });
    }

    render() {
        return (
            &lt;div className="add-form"&gt;
                &lt;form onSubmit={this.handleSubmit} className="card hoverable p-bottom"&gt;
                    &lt;p className="p-top"&gt;ADD COMMENT&lt;/p&gt;
                    &lt;input onChange={this.handleContentChange} value={this.state.content} type="text" placeholder="comment" /&gt;
                    &lt;input id="name" onChange={this.handleAuthorChange} value={this.state.author} type="text" placeholder="name" /&gt;
                    &lt;input value="submit" type="submit"/&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        );
    }
};

export default AddComment;