Working on React with WebStorm I'd love to set up WebStorm's code completion to offer:
<div style={}...
instead of:
<div style=""...
Any way to achieve this behaviour?
Upgrade to 2016.2. It does that now.
From their What's new:
WebStorm can now provide code completion and resolve for component
properties defined using propTypes. For React events the IDE will
automatically add {} instead of "". Non-DOM attributes are no longer
marked as unresolved, and similarly, component lifecycle methods are
not marked as unused anymore.
Related
Would anyone know how to debug and fix (or mute) following warning (apparently, Mantine is dropping react-popper in next major release)?
Everything works fine, but warning is making it very hard to debug other issues.
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
at Popper (webpack-internal:///./node_modules/#mantine/core/esm/components/Popper/Popper.js:67:3)
at div
at eval (webpack-internal:///./node_modules/#mantine/core/esm/components/Box/Box.js:42:18)
at Popover (webpack-internal:///./node_modules/#mantine/core/esm/components/Popover/Popover.js:76:85)
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:30:19811)
at SecretTextareaWithLength (webpack-internal:///./src/main/routes/Create.tsx:106:48)
at form
at div
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:30:19811)
at Create (webpack-internal:///./src/main/routes/Create.tsx:291:48)
at Routes (webpack-internal:///./node_modules/react-router/index.js:920:5)
at MenuEvents (webpack-internal:///./src/main/MenuEvents.tsx:34:55)
at Router (webpack-internal:///./node_modules/react-router/index.js:854:15)
at MemoryRouter (webpack-internal:///./node_modules/react-router/index.js:767:5)
at MantineProvider (webpack-internal:///./node_modules/#mantine/styles/esm/theme/MantineProvider.js:66:3)
at App (webpack-internal:///./src/main/App.tsx:40:35)
this is a bug in mantine When using Popper. it will be fixed in the next release.
one thing you can do is hack your local react copy to add conditional logic and skip this warning.
another simple way is overwriting the console methods :
console.warn = () => {};
console.warn('warnings skipped.');
but in this case all warnings will be ignored
I use quill editor. After i add this using react-html-parser. But this give me warning. How to fix it?
Warning: A component is contentEditable and contains children
managed by React. It is now your responsibility to guarantee that none
of those nodes are unexpectedly modified or duplicated. This is
probably not intentional.
I am practicing react on condesanbox.io installed jsx- control-statement dependency. When iam adding any of the control statement it is undefined.
How to configure jsx- control-statements in codesandbox.io.
This question might be couple of month old and its look like the questioner has not find the solution yet,so here is my fix
Solution: Instead of using just jsx syntax inside the return statement wrap the jsx with react fragment,below is the example
return (<>
{user ? <Component1/>:<Component2/>}
</>)
You will not be able to use jsx-control-statements in codesandbox.io in the similar way that you might in a local babel environment.
(i guess strikethrough isn't a thing on stackoverflow?) ~~You will have to import { If } from 'jsx-control-statements' to get access to the If tag, for example.~~
edit:
I've seen people import it in the past (similar to this example https://github.com/PedroBern/react-tiger-transition/issues/2 ) but, as I'm sure you're aware, the jsx-control-statements lib is a babel plugin; the code seen in that example is probably only serving to calm eslint in an older version of control-statements.
If you pull the jsx-control-statements dependency into codesandbox and cast it to a variable via import whatever from 'jsx-control-statements', and look at 'whatever', you'll see that it is a function. (see the link below for the full code.)
You COULD maybe go down the road of hackifying a dumbed-down version of babel-core, and passing it into whatever(babel) but you're better off creating your own If tag that has a condition property and conditionally renders children.
https://github.com/AlexGilleran/jsx-control-statements/blob/master/src/index.js
This is brand new install - I have not put any transitions on the Alert component
To replicate the code it is simple
import React from "react";
import { Alert } from "reactstrap";
export const Index = () => {
return (
<div>
<Alert color='primary'>This is a primary alert — check it out!</Alert>
</div>
);
};
Error Msg: Please update the following components: Transition
How does one go about updating Transition or eliminating it all together?
In the event that someone comes here on after searching the question and is looking for insight this is it.
React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.
It did not impede this iteration of that component. Happy Coding.
I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>.
Since this removes the warning, is not guaranteed that your can be bulletproof.
This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render
Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340
There are a number of issues related to this warning though.
As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'
But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.
I don't have the rep to put this in a comment, so the only answers I have are:
Report the issue to the reactstrap team and wait/assist with a fix
Use an alternative package
I see this a lot...
this.function = this.function.bind(this)
Is there a good video that explains what's happening here?
Thanks!
I'm assuming you are already using babel to compile your code, why not use the class properties feature and then you define your class method as an arrow function and don't have to bind it in the constructor. https://medium.com/#joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a#.igcom8sgv gives step by step how to set it up then you write your class methods like such : myFunction = () => { // do stuff } and the arrow function binds this appropriately.
WebStorm is most powerfull IDE for React: understand JSX Harmony, Components, props, state, etc. Has code auto formatting, understand npm scriptsm etc.
for free..
I always used Brackets, but when I started working with React I had to switch to a different editor due to the complete lack of support by Brackets.
I'm now using Atom with ton of plugins to work with React and be comfortable, these are the ones needed to work with React:
language-babel by gandm
linter-eslint by AtomLinter
react by orktes
the latter, especially, has an awesome support for React and JSX stuff.