DynamicForm.jsx

class DynamicForm extends React.Component {
	constructor(props) {
  	super(props);
    
    this.state = {
    	education: [
      	{ name: '', start: '', end: '' },
      ]
    }
  }
  
  handleAdd = () => {
  	this.setState({
      education: this.state.education.concat([{ name: '', start: '', end: '' }])
    });
  }
  
  handleChange = (event, index) => {
  	const updatedEducation = this.state.education.map((education, educationIndex) => {
    	if (index !== educationIndex) return education;
      
      return { ...education, [event.target.name]: event.target.value }
    });

  	this.setState({ education: updatedEducation });
  }
 
  handleRemove = (index) => {
  	this.state.education.length > 1 &&    
    this.setState((currentState) => ({
      education: currentState.education.filter((education, educationIndex) => index !== educationIndex)
    }));
  }
  
  validateInputs() {
    const {
      education,
    } = this.state;

    return {
      schools: education.map((education, index) => {
        return {
          name: education.name.length === 0,
          start: education.start.length === 0,
          end: education.end.length === 0
        };
      })
    };
  }
  
  
  render() {
  	const hasErrors = this.validateInputs();
    // check for errors on form inputs
    const educationFields = Object.keys(hasErrors.schools)
      .map(school => Object.keys(hasErrors.schools[school])
      .some(field => hasErrors.schools[school][field]));

    const fieldIsComplete = (fieldNotComplete) => {
      return fieldNotComplete === false;
    };

    const educationHasNoErrors = educationFields.every(fieldIsComplete);
        
    const isDisabled = educationHasNoErrors ? false : true;
    const isVisible = this.state.education.length <= 1 ? 'is-hidden' : 'is-visible';
  
    return (
    	<div className="container">
        <h2>Dynamic Form Example</h2>
        {
          this.state.education.map((school, index) => (
            <div key={index} className="wrapper">
              <div className="form-group">
                <label htmlFor="name">School Name:</label>
                <input
                  name="name"
                  id="name"
                  className="form-control"
                  onChange={event => this.handleChange(event, index)}
                  type="text"
                  value={school.name}
                 />
              </div>

              <div className="form-group">
                <label htmlFor="start">Start Year:</label>
                <input
                  name="start"
                  id="start"
                  className="form-control"
                  onChange={event => this.handleChange(event, index)}
                  type="text"
                  value={school.start}
                 />
              </div>

              <div className="form-group">
                <label htmlFor="end">End Year:</label>
                <input
                  name="end"
                  id="end"
                  className="form-control"
                  onChange={event => this.handleChange(event, index)}
                  type="text"
                  value={school.end}
                 />
              </div>

              <div className={`form-group ${isVisible}`}>
                <button
                  className="btn btn-danger pull-right"
                  onClick={() => this.handleRemove(index)}
                >Remove</button>
              </div>
            </div>
          ))
        }

        <div className="add-more form-group">
          <button
            className="btn btn-success"
            disabled={isDisabled}
            onClick={this.handleAdd}
          >Add more schools</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <DynamicForm />,
  document.getElementById('root')
);