import React, { Component } from 'react';
import PropTypes from 'prop-types';

const propTypes = {
    errors: PropTypes.arrayOf(PropTypes.string)
}

class FormErrorSummary extends Component {
    constructor(props) {
        super(props);
    }
    render() { 
        if (!this.props.errors.length) {
            return null;
        }
        return ( 
            <div className="error-summary" role="alert" aria-labelledby="error-summary-heading">
                <h2 id="error-summary-heading">
                    Errors
                </h2>
                <p>Before saving please correct the following</p>
                <ul className="error-summary__list">
                    {this.props.errors.map((error, index) => {
                        return <li key={index} className="error-summary__list-item">{error}</li>
                    })}
                </ul>
            </div>  
        )
    }
}

FormErrorSummary.propTypes = propTypes;
export default FormErrorSummary;
Add form error sumamry componeent that lists all errors on a form
Add form error sumamry componeent that lists all errors on a form


Former-commit-id: 491d442f3e3ba44980e24bea6b2efd4015ce7d7f
Former-commit-id: 64fdfa3ec46582c7713cb0d57cf7355de7b337ee
Former-commit-id: 3843129e557828bcfdecf91ca41e7af3fce16c18