It was brought up on this blog post (search for "Working with forms and Redux in React") and on Hacker News.

To be fair, this is a pretty common pattern of handling multiple inputs and it's not intuitive for someone to realize the name attribute can be used to achieve this. I think it's worth it to add it to the Forms section.

How do you feel about using the example in #8769 (comment) instead?

@gaearon sounds great to me! That's more clear than my example. Sorry, I've been traveling and didn't see your comments -- will update this PR by tomorrow.

Thank you so much!

Hey @gaearon, I revisited your example again carefully and I realized that our approaches are actually different. If I use your pattern to render a form with multiple input types, it quickly becomes more complex:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Jane',
      surname: 'Smith',
      isGoing: false,
    };
  }

  handleChange(name, e) {
    if (name === 'isGoing') {
      this.setState({
        [name]: e.target.checked // a `checkbox` has `.checked` but not `.value`
      });
    } else {
      this.setState({
        [name]: e.target.value
      });      
    }
  }
  
  renderInput(name) {
    if (name === 'isGoing') {
      return (
        <input
          type="checkbox"
          onChange={e => this.handleChange(name, e)}
          value={this.state[name]}
        />        
      );
    }
    
    return (
      <input
      	type="text"
        onChange={e => this.handleChange(name, e)}
        value={this.state[name]}
      />
    );
  }

  render() {
    return (
      <div>
      	{this.renderInput('name')}
      	{this.renderInput('surname')}
      	{this.renderInput('isGoing')}
      </div>
    );
  }
}

It also creates more level of redirections (mental overhead) and closures (onChange={e => this.handleChange(name, e)}). I recall that when I was learning React I didn't realize that event.target references the real DOM object that dispatched the event; I thought event.target was a React only thing and didn't know there were more attributes (like event.target.name) other than event.target.value. This sounds stupid but it actually took me a while to figure out a better way to make complex forms without creating 10 functions/event handlers 😅. That's why I used the name attribute here.

How do you feel about using my example in the PR? I might be subjective on this and would love to have your feedback.

OK, sounds good.

Thanks!