score:2

import React, { Component } from 'react';

class Article extends Component {

    constructor(props) {
        super(props);
        this.state = { article: this.props.article };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange( event ) {
        this.setState( 
            { article: 
                {
                    ...this.state.article, 
                    [event.target.name]: event.target.value 
                }
            }
        );
    }

    handleSubmit(event) {
        event.preventDefault();
        this.props.onSubmit(this.state.article);
    }


    render() {
        return (
            <div className="article">
                <h2>Edit Article</h2>
                <form onSubmit={this.handleSubmit}>
                  Headline:  
                  <input type="text" name="title" 
                      value={this.state.article.title}
                      onChange={this.handleChange}/>
                  Article Body:
                  <input type="text" name="body" 
                      value={this.state.article.body}
                      onChange={this.handleChange}/>
                  <button type="submit">Save</button>
                </form>
            </div>
        );
    }
}

export default Article;

Related Query

More Query from same tag