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
Related
The Image of what I've been facinghow to solve react issue of react component is defined but never used even when i tried using the component, but it keeps on saying the same thing.
I tried it for several times but it keeps on showing the same thing. I watched videos on Youtube but none of that match the problem am facing talk more of solving my problem.
Ok. I see two points to improve.
First of all, component names must start with an Uppercase.
So, instead of
src/addContact.js
import addContact from './addContact'
<addContact />
You should have
src/AddContact.jsx
import AddContact from './AddContact'
<AddContact />
Even StackOverflow understands that, see how the color of the code is different?
This change should fix your problem.
Also, it's good practice to use .jsx instead of .js for React Files (which are JSX Elements, thus .jsx).
I want to use i18n react useTranslation hook inside Context component. I guess that important thing is that the context was working correctly as long as useTranslation hook was used inside if statement which breaks the rules of hooks and sonarcloud mark this as A rate bug. But as I moved useTranslation call on the very top of the component I get following error:
Error: Should have a queue. This is likely a bug in React. Please file an issue.
And this inside console
The context and project itself is quite large so I am not sure how to provide enough code to present the problem.
As it turned out someone working on the project in the past didn't wrap LocaleContext over the Context I was struggling to repair so in my case all I had to do was following slight change from this:
<MyContext>
</LocaleContext>
<Component />
</LocaleContext>
</MyContext>
to this:
<LocaleContext>
<MyContext>
<Component />
</MyContext>
</LocaleContext>
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.
I'm brand new to both pouchdb and react. I found the react-pouchdb-changes module which seems exactly like what I want to be using.
However, the example code it provides is far too sparse - I'm really at a loss as to how it would be incorporated into a basic react application.
Can someone provide a more complete example usage with some basic explanations of what each piece does?
This module seems to be merely a wrapper for the changes method. You can get a live example here. The link comes right from the documentation.
If that's not enough info you can check out the API reference with examples and example responses.
It's up to you how you want react-pouchdb-changes to integrate with React. All it does is provide you with a component to put your onChange handler on. These parts of the code example are the relevant ones:
<PouchDBChanges
…
onChange={change => console.log(change) /* do something useful with the change here instead of just logging it! */}
>
{/* your <App> component here */}
</PouchDBChanges>
Just use the component in your JSX code (wrap your main component or any container component with it).
If you have difficulties with setting up a React example, try using create-react-app. You'll have a running React app within a few seconds. A good place to add your <PouchDBChanges> component would be src/App.js - just wrap the outermost <div> with the component.