Help Request: React does not recognize the prop

[RyanHow]

Hi,

I'm trying to achieve 2 way data binding to a property. Similar to in this example where the React prop doesn't meet the naming conventions for the Angular banana box syntax.

https://github.com/microsoft/angular-react/blob/master/libs/fabric/src/lib/components/checkbox/checkbox.component.ts

However I get a warning from React

Warning: React does not recognize the `queryChange` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `querychange` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

My prop is called query, the React prop is called onEditQuery (which I bind as [EditQuery]), so I've made a queryChange EventEmitter, then emit an event in the EditQuery handler function.

Is there any workaround for this? It still all works, I just don't like the errors in the console.

Thanks!

[aarongreenwald]

Hi - I definitely agree with you, noise in the console is annoying and should not be tolerated, even if everything works :)

I'm new to this project so I can't give you an immediate answer, but I'm going to try to take a look and see what's causing this and if we can get rid of the warnings. Of course if you open a PR with a solution I'd be thrilled to review. :-)

[aarongreenwald]

@RyanHow For clarification, is the React component you're using something from angular-react/fabric or is it your own React component? Or something from a third-party? I'm trying to understand where the queryChange prop is getting passed to a DOM element. It seems like something that would happen because a React component is passing all of its props to its children.

This was once a common practice in React-land, but now React recommends against it with this warning. See here: https://reactjs.org/warnings/unknown-prop.html

Am I on track here? Or completely missing the point? Like I said, I'm new to this project so please let me know if I'm missing something.

[RyanHow]

I'm just using the convention in the fabric component as a reference. It's a 3rd party React component I'm wrapping.

My component differs from the fabric one though because it's wrapped in a div. I think that may be causing the issue.

Like this:

<div #reactNode className="myreactcomponent-container">
    <MyReactComponent [fetch]="fetch"></MyReactComponent>
    <MyOtherReactComponent [fetch]="fetch"></MyOtherReactComponent>
</div>

If I remove the wrapping div, then it seems to work without the error.

Maybe I should be wrapping each React component separately then assembling them in Angular space? Apart from this issue, it seems to all work fine though. And the components are very tightly coupled and would never be used separately, so it's just a lot of extra wrapping, then making an angular component and passing through all the props. So I'm hoping it doesn't need that unnecessary extra layer.

What I was trying to do was like the fabric component here

https://github.com/microsoft/angular-react/blob/master/libs/fabric/src/lib/components/checkbox/checkbox.component.ts

There is this

  /* Non-React props, more native support for Angular */
  // support for two-way data binding for `@Input() checked`.
  @Output() readonly checkedChange = new EventEmitter<boolean>();

So it isn't a react prop. It's adding a bit of Angularification in the wrapper to make it nicer to use in Angular space. The warning appears to be because it is still getting passed along to the react component (It's passing it along to the div element), which doesn't recognise it.

Is there a way to stop it being passed along? React just seems to strip it out, which is fine, it's just that it generates console noise.

I'm new to React. I'd assume there is a way to supress the error, but it would seem nicer to be able to specify that the property isn't passed to the react component?

I hope that makes sense!

Thanks :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[morrisdirector]

I have precisely the same issue. Getting the unknown prop warning for 'checkedChange'. Were there any further ideas how to resolve this?

/* Non-React props, more native support for Angular */
  // support for two-way data binding for `@Input() checked`.
  @Output() readonly checkedChange = new EventEmitter<boolean>();

[RyanHow]

I didn't come across any solutions

[BeKnowDo]

In my opinion, this is the industry being too opinionated. We should be able to use custom attributes with any casing. This is simply silly