jiebi/CodeConvo huggingface dataset:
I'm using tag to generate client certificates and I'm missing challenge and keytype attributes.
It would be cool if React gives us the opportunity to use different syntax for attrs and props: And may be: There would be no need to know what tags React supporting.
There's more planned to alleviate the issues around unknown elements and properties, but we're not there yet. We have no plans on to use different syntax. Adding the additional attributes here seems totally reasonable.
Will try to take a stab at this. I assume this is as simple as adding those props to , and then adding tests. Is that correct or am I missing anything significant?
It's even easier than that since we don't really have tests for the attributes. But do actually test in a couple browsers that changing values across renders is reflected appropriately (usually the issues is property vs attribute).
You're quick, guys. Thanks in advance!
By 'across renders' you mean simply triggering a re-render (by changing the value)?
Yea. I usually just make a simple component with a button that toggles state so I can test with multiple values easily.
Great. Thx.
I missed a detail in docs. Although, I don't need it, there's an additional attribute, keyparams, which is required with "dsa" and "ec" keytypes. See
Have this working, though I'm not entirely clear if these should be , or . I wasn't able to deduce the meaning of these from the code. Is there someplace I can read up on these?
Those are used to determine if we do or if we do when updating. means it doesn't matter and browsers should work with either. Currently we use properties in that case but we may switch that in the future. indicate that they must be set & removed as a property or an attribute.
Thanks. That makes sense. Had to use to get it to work properly across Chrome/FF/Safari. Your testing method great as well. Thx for your help
<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? Bug What is the current behavior? In , the shallow renderer will set instance state in so the and will be the same in , which is different with the behavior of real rendering. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: given below class component: render with ReactDOM, the will return true since will be the old value : In shallow renderer, the behavior is different: What is the expected behavior? ShallowRenderer should not set the instance state in getDeriveStateFromProps, or in the we have no way to compare it. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? I have tested this in master branch and 16.3, both not work. By the way this problem is related to airbnb/enzyme . If it's recoginzed as a bug I can provide a PR in next several days.
We need a way to test the output of a single level React component without resolving it all the way down to the bottom layer (whatever that is). I'm thinking something like this: Basically, this fix needs to go through the entire life-cycle of ReactCompositeComponent. It just needs to bail out whenever it would've continued rendering.
Reopened so that we can track the remaining features (refs etc.)
Weird, I thought GitHub only closed issues if you used language like "fixes #NNNN", not if you simply mentioned the issue at all. Sorry about that.
The PR text included "WIP to "
Is the rest (refs support) blocked by or can more work be done now?
Any reason this doesn't support other than that it's not implemented yet? I was hoping to do something like
that's supposed to work. Can you post a minimal repro?
How do you do this?  does not return an instance.
It works if I use so I think could just return that from . (I also have to shim because React expects it to be defined for some reason.)
Finding this quite useful. But it has been a bit inconvenient to have among the children when an element is conditionally rendered.
The idea was to make the helpers ignore null which could help with that. Perhaps we could have return an iterable which traverses nested arrays and ignores null.
Really? Allowing nulls was a change intentionally introduced a long time ago. In I have an implementation of toArray.
Allowing empty children (null, undefined, boolean) was a controversial topic, where we eventually landed on null/boolean/undefined being passed through. That way you could explicitly treat an empty slot as something special. This landed very early on before we really started seeing pattern developing. However, IMO, we've seen that this leads to inconsistent implementations where null slots will break and is not possible to use. It is unclear whether a set of children allows nullable slots, and if they do, it is unclear what that means. For example, in a grid layout component, does an empty slot mean that there should be an empty column in the grid, or that it should be skipped? Therefore, a lot of our components end up with explicit null checks. Meaning boilerplate, and inconsistent behavior when they're forgotten.
Therefore, I think the default should be to filter out nulls which is consistent with the behavior of the built-ins components. It is still possible to get access to the raw data if you have a different type of children in mind where empty slots is meaningful.
How should this work with the TestUtils functions. For example, this fails: I can't see any other info on mentioned at the start of this issue, is this what I'm missing? My end goal is simply to test that if I pass in 10 articles then 10 components get rendered. Any help would be awesome.
Hi David, the and functions are meant to be used with the output of , not shallow rendering. React doesn't currently provide a helper that will traverse trees for you. Your options for now are to describe the structure of the tree explicitly as in lines 4-5 of your example, or write your own helper module to find descendants you care about. hasn't been implemented yet. Refer to the for what's actually in React.
Cool, thanks for the reply I've returned to just using since the components I'm testing (and their children) don't have state/stores so don't really need mocking out anyway. One last (maybe stupid) question, what does mean?
So, I am trying to use Shallow Rendering and have it mostly only thing left I can’t figure out is the recommended way to mock events and how to get with events to pass. I've attempted to use the method directly from the in the test (). This seems dirty…is there a way to just say or something? I could post this on Stack Overflow, but I have had very little luck finding good information about Shallow Rendering online. If anyone has experience with shallow rendering and can give me some help you will be my hero... Source code: ! !
If I have an issue with shallow rendering, should I create a new issue, or post it here?
New issue please.
you might find that helps in providing higher-level assertions for the sort of thing you're doing there. In that particular case, I would avoid asserting on the event handler of the anchor in that test - but a different test would want to call to test the handler.
Super late reply, but "scry" is a fancy word for "find". I'm not sure why we don't just use "find".
Maybe to avoid confusion between the plural and singular forms, whose names would otherwise differ only by one "s".
scry is because of legacy internal FB APIs. No reason.
Like I'm keenly on the lookout for a way to correctly unit test event handling in React code. Is there any documentation that anyone could point me to? I've looked at but it didn't seem to have something that scratches my particular itch. Here's my scenario (cut down): Where Problem looks like this: I'd like to be able to assert that is wired up for my component but I'm at a loss as to how to do that....
What you actually want is to assert that clicking interacts with the router. Pass in a fake context with a router mock (try Simon) then call Apologies for the brevity, on a phone.
Hi Thanks for responding. I'm not too clear on how to mock successfully when it comes to context. Digging through the source of I came up with this: However this dies a death with: Which makes me think I'm getting the context mocking wrong. Do you know how you successfully mock context with ? I'm using Jasmine (as you probably guessed!) I have a feeling I'm close...
Are you using React 0.13? You're probably hitting the difference between parent & owner context. Skin deep has a wrapper that helps with this - there's a context example the test suite, but the short answer is to wrap your render in another function call and let skin deep set up the context. This problem should go away in 0.14
I am using React 0.13, yes. If I port to 0.14 this issue should resolve? I might give that a crack if that's the case (it is in RC after all)
Problems with the upgrade. I have raised . Will have to return to this later I think.
I have written and as companion tools when testing with shallow rendering. It gives you the ability to diff on JSX strings rendered instead of React element objects.
Hi, I was wondering what was the state of: simulating events when using shallow rendering using refs when using shallow rendering How can we help make this happen if that's still planned?
This issue is pretty stale so I’ll close it.
reported the following issue on IRC: (Both on master and 4.0) The repro case is: 1) Render 2) Render 3) Render the same as 1) The div has its innerHTML empty instead of . I don't really know what's going on. can you guys look at it?
One other tidbit: this only seems to happen when the value is exactly the same in step 3 as it was in step 1. If it's different (i.e. ), things work as expected.
What happens if you change step 2 to a instead of a ? It works, right?
I just reduced the test case to 19 lines.
yeah changing 2) to use a span works as expected
If anyone wants to look into this, the bug is probably here
I cannot reproduce what you are seeing: It also bugs if I use a different string
I'm not able to reproduce that particular behavior given this small repro case. The original code had several more layers... will keep trying.
I know this is a very old issue but I had a similar problem and came across this. I found that this problem occurs when you do not add a property to the React component containing the property. So, does not seem to work reproducibly, whereas seems to. I think this could be related to React's diffing algorithm that might not properly treat a component with a statement if that component gets rerendered multiple times with different inner content. Just posting this here in case other people have the same issue and stumble upon this.
thx you saved my day :-)
Seems like the issue is back again. Thanks, solves the problem for me too.
If any of you can post a simple repro case showing the broken behavior here, I'd be happy to take a look at fixing it.
Took me a while to repro, but here you go: (ugly, but demonstrates the issue well)
Thanks. This is the same issue as . No fix currently, but using the key as a workaround is fine and I'll see if we can fix this sometime.
Thanks that was giving me fits!
If anyone is still seeing issues on 0.14, please make a new issue with a simple repro case.
I have this issue, but can't reproduce in a simple example - my original code is layered and I think that's the reason the real DOM doesn't reconcile. In the react debugger is looks as dangerouslySetInnerHTML has proper __html value, but it doesn't equeal to the innerHTML of the actual element. I used an extremely simple (and equally nasty) workaround. Writing it here just in case it will help someone:
Reading out will rarely give you what you put in because the browser does various kinds of normalization on it. If you can repro with a standalone example though I'm happy to take a look.
well, that's more like a control shot :-)
Looks like the issue still exist in 16.4.1 when using on a tag, you cannot nest other or . issue is fixed by replacing the container with a
If you experience something similar three years later, and the original issue is closed, you can be sure it's a different unrelated issue. :-) Please file a new one. We don't keep track of closed issues so your feedback is unfortunately going into the void. When filing a new issue, please provide a reproducing example. when using dangerouslySetInnerHTML on a tag, you cannot nest other or This sounds like browsers work. You can't nest into . This is why React warns when you do it (except in which case React can't validate it).
Describe what you were doing when the bug occurred: back to go back through the frames following a profile session. I think I got to zero and then clicked it again and then it errored Please do not remove the text below this line DevTools version: 4.8.2- Call stack: at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) at getCommitTree (chrome-) Component stack: at CommitRankedAutoSizer (chrome-) at div at div at div at SettingsModalContextController (chrome-) at ProfilerProfiler (chrome-) at ErrorBoundary (chrome-) at PortaledContent (chrome-) at div at div at ProfilerContextController (chrome-) at TreeContextController (chrome-) at SettingsContextController (chrome-) at ModalDialogContextController (chrome-) at DevToolsDevTools (chrome-)
Please how do I replicate this? I don't seem to be able to replicate it.
sorry, I won't have time to create a mre. I was doing a recording on a site with a lot of components and a lot of frames in the recording. I ended up going to maybe frame 30 then clicking back rapidly to get back to 0 and I guess went to far or something. Feel free to close this, I thought that the logs might be enough and it was encouraging me to submit the issue.
Can I have a look ?
Maybe change this recursive function And use a loop going to correct the issue. If it is ok, i can work on it.
can you share how you were able to replicate the issue?
I think for there to be a stack overflow from calling itself, it would need to have profiling data with thousands (?) of commits. This function only recurses (at most) once per commit when processing data, and then, too, only if you jump through commits you haven't yet processed (so 0 -N would recurse N times). That being said, it seems like we could also rewrite this function to be iterative without too much trouble. Done in PR !
That's quite possible actually. The issue I was trying to diagnose was high CPU usage on an app that has spreadsheet like functionality, i.e.
<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --React version: DevTools version 4.12.2- from within a React component where the last argument is typeof <!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. --Link to code example: The bug only happens when you make a change, so if you use the code sandbox link you need, open a new window, active dev tools, open the React dev tools and then uncomment line 5: only then will the error actually happen. I've located the culprit to this line of code And would offer the following change <!-- Please provide a CodeSandbox (), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: --React DevTools is implicitly converting a Symbol to a string. React DevTools does not implicitly try to convert a Symbol to a string.
Thanks for the report. Also reproduced with DevTools version 4.12.3- in Chrome 90 In addition to fixing the bug, it would also be nice to guard against devtools failing so that the UI is unaffected if devtools is faulty. /cc
Your the best, thanks for a quick turn around!
Observed this on react This renders as . If you try to hydrate this you'll get the error: Text content did not match. Server: "bc" Client: "b".
I suppose the bug here is that we do not separate from here but we should.
React has been released. Please update , , and (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get out.
Everything looks good on my end, thanks!
When unmounting components like this: a memory leak happens because ReactMount.getID(node) puts DOM nodes back to nodeCache if they are not there.. just right after they were purged from cache. Here is what's happing when unmounting that example component: label component gets purged from nodeCache when ReactDOMInput component is going to unmount it calls this method: which contains this.getDOMNode() which iterates through the children of the Form element calling getID() on each of them.. which puts these elements back into the cache. So first they were purged and here they are all put back in cache causing a memory leak :( I'm playing with React just 3rd day so not sure of a way to correctly fix this issue
(I took the liberty to edit your comment to add syntax highlighting)
I can't reproduce this. With this diff applied, I loaded http://127.0.0.1:8000/examples/ballmer-peak/ in the console and checked -- it was empty. Am I misunderstanding?
Yes. You've missed one more user defined component in there.. Here you go:
Thanks, fixed in .
Thank you for fast fix :)
Thanks for the find/fix!
Someone had the trouble in IRC about it. Edit: changed the subject from "document it" to "support it", because the documentation issue is already at .
Better yet, support it!
Yeah, is there a particular reason it's not supported?
Curious if you've seen the . It's automatically injected into React by default, so you can use it today. IMHO it's (much) better than . (I suppose we could support just for the sake of completeness, but I thought I'd just make sure you guys were aware of .)
We discussed this for a bit on IRC -- was just confused that silently didn't work whereas other events did -- perhaps adding more documentation () will fix the problem too but it seems like we might as well add for completeness. (I agree that enter/leave are much more useful and suggested that over/out are likely missing simply because no one has needed them!)
Agree - I believe there are a few extra allocations (not-pooled) occuring in the event system already today. I'd love to track those down before adding more mouse-move event allocations. If you open the memory profiler in Chrome and move the mouse around, you'll see memory being allocated (and then properly freed of course) but if we use es everywhere, we should be flat. That would make me much more comfortable with adding to . Edit: Just checked out - we already have which fires way more frequently than would so it's probably not such a big deal to add - though we really should get rid of all additional allocations in the event path.
Just started to look a little bit into the allocations here. Redefining trapBubbledEvent in ReactEventEmitter with: still shows allocations in the Chrome memory timeline view, so I'm not convinced that there's anything we can do here? (Replacing trapBubbledEvent itself with a noop makes the allocations go away. simply calls addEventListener.)
I am pretty sure we have done all we can here -- at least I think we've tracked down every callsite where PooledClass would have helped us. I updated our recast transforms to log every syntax construct that would cause an obvious allocation and couldn't find anything. I was thinking maybe there was an array slice or a bind() in there, but experiment shows that this is not the case.
(I didn't verify that we don't have more allocations than the empty-function case; I don't know of a good way to do so.)
I might be misinformed, but isn't there quite a difference in use cases between mouseenter and mouseover events? Here's a theoretical (non-react) example working with some hover states for nested elements: I tried to apply the above concept in react (with nested components) using onMouseEnter instead, but it obviously fails because it's only triggered once on the top-most element. Moving into a child element and back has no effect. Maybe there's a better approach for this in react altogether?
If you render the child hierarchy with React, you can listen to on each child element you are interested in instead of using event bubbling. It is cheap.
<!-- Note: if the issue is about documentation or the website, please file it at: --Do you want to request a feature or report a bug? Bug. Behavior regression. What is the current behavior? Package throws when being required in Node. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: What is the expected behavior? should not throw in "pure" node (without providing fake document on global). Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? happens on 16.8.0 previous versions work.
We also got this issue after upgrading to 16.8.0
Found the fix and putting together a PR now edit: now on the case
Here's an example at jsbin: Clicking for the first time works (mounts a SVG +), but when clicking the same button again (which should unmount the rect+title), react throws an exception. I have no clue how to get around this. Help is very much appreciated. Thanks in advance!
Ah, this is because React doesn't let you unmount the HTML element. I don't believe there's a workaround right now, sorry. cc
Fixed by .
I am using a few react components made by various libraries like material ui and i get this message on doing i can see only one version of react installed. I am using gulp and browserify for my build process. Any idea how i can solve this?
I've found this is common when modules have React as a dependency rather than a peerDependency in the npm package. If you're using webpack, I've got around this by creating an alias, perhaps you can do something similar in Gulp.
Awesome that helped.. Just sharing some ref for others Thanks.
Also please file issues in such libraries and gently ask them to use for instead .
For those who do not want to install any other packages for resolving. Configure a require key in the browserify object and that will take care of the error