<commit_before>import React, {Component} from 'react';
import ReactDOM from 'react-dom';
export default class RegOpzFlatGridCell extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.data[props.identifier],
            style:{display:'none'}
        }

    }
    render() {
        return (
            <div className="flat_grid_row_cell">
                <span onClick={this.handleCellClick.bind(this)}>
                    {this.state.value}
                    <input
                        value={this.state.value}
                        style={this.state.style}
                        onChange={this.handleChange.bind(this)}
                        onBlur={this.handleBlur.bind(this)}
                    />
                </span>
            </div>
        )
    }
    handleCellClick(event) {
        this.setState({
            style:{display:'block'}
        });
    }
    handleChange(event){
        this.setState({
            value:event.target.value
        });
    }
    handleBlur(event){
        this.setState({
            style:{display:'none'}
        });
    }

}<commit_msg>Grid made editable by appending and more efficient way<commit_after>import React, {Component} from 'react';
import ReactDOM from 'react-dom';
export default class RegOpzFlatGridCell extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.data[props.identifier],
        }
        this.inputElem = null;
    }
    render() {
        return (
            <div className="flat_grid_row_cell">
                <span onClick={this.handleCellClick.bind(this)}>
                    {this.state.value}
                </span>
            </div>
        )
    }
    handleCellClick(event) {
        this.inputElem = document.createElement("input");
        this.inputElem.value = this.state.value;
        this.inputElem.addEventListener('change', this.handleChange.bind(this), false);
        this.inputElem.addEventListener('blur', this.handleBlur.bind(this), false);
        event.target.appendChild(this.inputElem);
    }
    handleChange(event){
        this.setState({
            value:event.target.value
        });
    }
    handleBlur(event){        
        $(event.target).remove();
    }

}
{'fraction_non_alphanumeric': 0.12100259291270528, 'fraction_numerical': 0.0, 'mean_word_length': 1.7012835472578762, 'pattern_counts': {'":': 0, '<': 12, '<?xml version=': 0, '>': 12, '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': '5895130', 'n_tokens_mistral': 626, 'n_tokens_neox': 615, 'n_words': 100}