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