how to build a Form component in react

I am newbie to React.js and I m trying to build the form builder in react - something similar to this https://formbuilder.online/ - I got started with buttons from very beginning - I am trying to add a text field via one of the methods after the button is pressed - and it doesn't make any difference at all to the code. As in at-least it should print something in console but doesn't. Please help!!

import React from "react";
import ReactDOM from "react-dom";


export default class EditForm extends React.Component {
  constructor() {
    super();
    this.state = { values: [] };
    }


handleChange = (i, event) => {
  console.log("handle clicked test clear")
     // let values = [...this.state.values];
     // values[i] = event.target.value;
     // this.setState({ values });
  }


handleAddfeild = () => {
  return this.state.values.map((el, i) =>
     <div key={i}>
        <input type="text" value={el||''} onChange=    
 {this.handleChange.bind(this, i)} />
     </div>); 
// console.log("should add text field");
};


handleClearfeild = () => {
console.log("should remove the added feild")
};

handleSaveform = () => {
console.log("will save this form using node API")
}



render() {
 return (
   <div className="container-fluid">
          <button type="button" onClick={this.handleAddfeild}
          className="small">Add Text Feild
          </button>

          <button type="button" onClick={this.handleSaveform}
                  className="small">Save Form
          </button>

          <button type="button" onClick={this.handleClearfeild}
                  className="small">Clear
          </button>

  </div>
    );
  }
}

your handleAddfeild function should be adding an item into the (values?) array of your state. It doesn't need to return anything though. You should loop over the array in your render function instead.

here is an example of what that may look like

import React from 'react';
import ReactDOM from 'react-dom';

export default class EditForm extends React.Component {
  constructor() {
    super();
    this.state = { values: [] };
  }

  handleChange = (i, event) => {
    console.log('handle clicked test clear');
    // let values = [...this.state.values];
    // values[i] = event.target.value;
    // this.setState({ values });
  };

  handleAddfeild = () => {
    let fields = this.state.values;
    fields.push({ value: '' });
    this.setState({ values: fields });
    // console.log("should add text field");
  };

  updateFieldValue = index => event => {
    let fields = this.state.values;
    fields[index].value = event.target.value;
    this.setState({ values: fields });
    event.persist();
    return false;
  };

  handleClearfeild = () => {
    console.log('should remove the added feild');
  };

  handleSaveform = () => {
    console.log('will save this form using node API');
  };

  render() {
    const fields = this.state.values.map((field, i) => {
      return (
        <div key={i}>
          <input
            type="text"
            value={field.value || ''}
            onChange={this.updateFieldValue(i)}
          />
        </div>
      );
    });
    return (
      <div className="container-fluid">
        <button type="button" onClick={this.handleAddfeild} className="small">
          Add Text Feild
        </button>

        <button type="button" onClick={this.handleSaveform} className="small">
          Save Form
        </button>

        <button type="button" onClick={this.handleClearfeild} className="small">
          Clear
        </button>

        {fields}
      </div>
    );
  }
}