0

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()
  }
Paul
  • 3,644
  • 9
  • 47
  • 113
  • Can you share full code? – bkm412 Jun 19 '19 at 08:17
  • This is essentially, in a nutshell, the amount in the App that would be a Modal, I would like to make sure that when the user clicks on the button where the handleSubmit () function is located, at the end it must run this.props.addrow (). It seems to work, but when I call the Component Modal for the first time, it gives me that error. – Paul Jun 19 '19 at 08:31

1 Answers1

0

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.

Bryan
  • 274
  • 3
  • 9
  • Also it's better practice to use upper camel case.. I think you just mistyped `addrow`.. so you can change that to `addRow` – Bryan Jun 19 '19 at 08:25
  • Not only that I was wrong to write here. This is essentially, in a nutshell, the amount in the App that would be a Modal, I would like to make sure that when the user clicks on the button where the handleSubmit() function is located, at the end it must run this.props.addrow(). It seems to work, but when I call the Component Modal for the first time, it gives me that error. – Paul Jun 19 '19 at 08:35
  • If I try to write the name in uppercase for example from addrow to addRow, it gives me the following error: React does not recognize the `addRow` prop on a DOM element. If you intentionally want to appear in the DOM as a custom attribute, spell it as lowercase `addrow` instead. If you accidentally passed it from a parent component, remove it from the DOM element. – Paul Jun 19 '19 at 08:45
  • hmm try to split your props in the `CreateQrModal` component `const { addRow, ...rest } = this.props` https://reactjs.org/warnings/unknown-prop.html https://stackoverflow.com/questions/54468535/how-to-solve-warning-react-does-not-recognize-the-x-prop-on-a-dom-element Check these articles – Bryan Jun 19 '19 at 08:54
  • The problem is who gives me the following error: React does not recognize the `addRow` prop on a DOM element. If you intentionally want to appear in the DOM as a custom attribute, spell it as lowercase `addrow` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Even if I don't use it in the Modal component, just pass it to the component I gives error. – Paul Jun 19 '19 at 08:58
  • can you post the full components that you're working with? - The `CreateQrModal` and the parent component – Bryan Jun 19 '19 at 09:29