Reactjs将函数props传递给component&#39;addrow` on的无效值 <div> 标签。 从元素中删除它

Question

I'm trying to pass a function to a component, but I'm having the following problem:

"Reactjs pass function props to component Invalid value for prop addrow on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM."

Code:

constructor(props) {
    super(props);
    this.props = props;
    this.addRows = this.addRows.bind(this);
}

addRows() {
 console.log("AddRows")
}

<CreateQrModal
      show={modalAdd}
      onHide={this.modalAddClose}
      addrow={this.addRows}
/>

Component:

  handleSubmit() {
    this.props.addrow()
  }

Answer 1

from your code snippet..

change this.props.onRow() to this.props.addrow() .. it seems you mistyped the name.

Also you can get around the binding by using Arrow function syntax

so addRow = () => {...} .. then you don't have to manually bind the function to the component in the constructor.