Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help Request: React does not recognize the prop #125

Open
RyanHow opened this issue Jun 11, 2019 · 7 comments
Open

Help Request: React does not recognize the prop #125

RyanHow opened this issue Jun 11, 2019 · 7 comments
Assignees
Labels

Comments

@RyanHow
Copy link

RyanHow commented Jun 11, 2019

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
Copy link
Contributor

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 aarongreenwald self-assigned this Jun 12, 2019
@aarongreenwald
Copy link
Contributor

@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
Copy link
Author

RyanHow commented Jun 20, 2019

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
Copy link

stale bot commented Aug 19, 2019

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.

@stale stale bot added the stale label Aug 19, 2019
@morrisdirector
Copy link

morrisdirector commented Jan 9, 2020

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
Copy link
Author

RyanHow commented Jan 11, 2020

I didn't come across any solutions

@BeKnowDo
Copy link

BeKnowDo commented Jul 9, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants