<commit_before>import React, { Component } from 'react';
import css from './trivial.css';

class About extends Component {
  handleSubmit(e) {
    e.preventDefault();
    this.props.mutator.greetingParams.replace({
      greeting: document.getElementById('g').value,
      name: document.getElementById('n').value });
  }
  render() {
    let greeting;
    if (this.props.data.greetingParams ) {
      greeting = <h3>{this.props.data.greetingParams.greeting} {this.props.data.greetingParams.name}</h3>
    } else {
      greeting = <h3>No one here :(</h3>
    }
    return <div className={css.root}>
        {greeting}
        <form ref='form' onSubmit={this.handleSubmit.bind(this)}>
        <label className={css.label}>Greeting:</label> <input className={css.textInput} id='g' type='text' />
          <label className={css.label}>Person:</label> <input className={css.textInput} id='n' type='text' />
          <button className={css.button} type="submit">Greet</button>
        </form>
      </div>
  }
}

About.manifest = {
  greetingParams: { initialValue: { greeting: 'Hello', name: 'Kurt' } },
};

export default About;
<commit_msg>If dataKey prop is provided, use it to uniquely name form elements<commit_after>import React, { Component } from 'react';
import css from './trivial.css';

class About extends Component {
  handleSubmit(e) {
    e.preventDefault();
    const dk = this.props.dataKey || '';
    this.props.mutator.greetingParams.replace({
      greeting: document.getElementById(`g${dk}`).value,
      name: document.getElementById(`n${dk}`).value });
  }
  render() {
    const dk = this.props.dataKey || '';
    let greeting;
    if (this.props.data.greetingParams ) {
      greeting = <h3>{this.props.data.greetingParams.greeting} {this.props.data.greetingParams.name}</h3>
    } else {
      greeting = <h3>No one here :(</h3>
    }
    return <div className={css.root}>
        {greeting}
        <form ref='form' onSubmit={this.handleSubmit.bind(this)}>
        <label className={css.label}>Greeting:</label> <input className={css.textInput} id={`g${dk}`} type='text' />
        <label className={css.label}>Person:</label> <input className={css.textInput} id={`n${dk}`} type='text' />
          <button className={css.button} type="submit">Greet</button>
        </form>
      </div>
  }
}

About.manifest = {
  greetingParams: { initialValue: { greeting: 'Hello', name: 'Kurt' } },
};

export default About;

{'fraction_non_alphanumeric': 0.17179171791717918, 'fraction_numerical': 0.003280032800328003, 'mean_word_length': 3.4525547445255476, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1519790', 'n_tokens_mistral': 779, 'n_tokens_neox': 795, 'n_words': 153}