0

I'm trying to add and remove input fields using react. I've managed to add the filed successfuly but cannot remove the field, or even trigger an alert! Can anybody see what I'm doing wrong?

let count = 0;
class RedirectURI extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        attributeForm: []
    };
    this.addAttributeForm();
 }
removeAttribbuteForm(){
    alert('boom!');
}
addAttributeForm() {

     count=count+1;
     console.log(count);

    var array = this.state.attributeForm;
    if (count >= 10){
       document.getElementById('addURI').style.display = "none";
       return false;

     } else {
     array.push(
          <div>
              <label htmlFor="redirect-URI">Redirect URI</label>
              <input name="redirect-URI" />
              <button className="remove-input" onClick= . 
            {this.removeAttributeForm.bind(this)}>remove</button>
          </div>
    );

    this.setState({
        attributeForm: array
    });
     }
}

render() {
  return (
      <div>
          { 
            this.state.attributeForm.map(input => {
                return input
            })
          }
          <button id="addURI" onClick= . 
  {this.addAttributeForm.bind(this)}>Add Redirect URI</button>
      </div>
  );
 }
 }

ReactDOM.render(<RedirectURI />, document.getElementById('app'));

ERROR

react-dom.production.min.js:157 Uncaught TypeError: Cannot read property 'bind' of undefined
at RedirectURI.addAttributeForm (pen.js:30)
at new RedirectURI
1
  • What error you are getting Commented Jun 7, 2019 at 10:26

1 Answer 1

1

Your code works with minor corrections. See here

  1. You have dots in onClick=
  2. It seems you misspelled removeAttributeForm. Copy/paste original function name (which is removeAttribbuteForm with two bb) solves all errors
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.