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).
Related
I am working on MUI template and when I make changes i have seen it is showing errors that usually does not matter. e.g if I import a component in a file but i decide not to use it , react will show me error saying something like this
Line 12:3: 'Story' is defined but never used no-unused-vars
in one of my file I decided not to use this (story) component and react showed me this error. its annoying when u have a lot of changes to make and you keep getting these kinda errors. how can I get rid of these kind of errors permanently
First solution is to remove any unused imports, and declarations of variables/methods/components.
The second solution is to paste this link above your line
//eslint-disable-next-line
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>
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 have read similar questions before but none seem to fix my issue what I'm trying to accomplish. I must be blind or misunderstanding something fundamentally.
Nesting a container component in a presentational component (Stackoverflow)
Why using nested connect react redux components is good (Medium)
My code example is the following:
When I'm nesting components I get the following structure:
<Provider store={store}>
{ /* container component connected via redux (has as you can see props.children) */ }
<Navigation>
{ /* presentational component */ }
<Main>
{ /* container component connected via redux */ }
<Counter />
</Main>
</Navigation>
</Provider>
While this seems rather intuitive I am receiving weird errors I can't explain (would be nice if someone can). In the browser the error is:
You must pass a component to the function returned by connect. Instead received undefined (Navigation.tsx) I'm not even sure if the error is related to nesting components. When i change counter to be the presentational component everything works as expected. Typescript or my implementation has issues with containers inside already connected components.
In the sandbox the error seems to come from composing counter inside main. Am I missing something? A type maybe?
I understand that I can solve this issue by nesting only inside my top-level navigation container mapping/connecting only once with the store but this is not the solution I'm looking for. I would rather want to take the advise of https://stackoverflow.com/a/38537606/222474.
Thanks in advance for the help.
Edit:
While #Tomasz has solved the error, I don't understand why this is happening. Skimming through https://www.typescriptlang.org/docs/handbook/module-resolution.html didn't help either. Is this somewhat type related for index.js exports? If someone can add clarification, this could be helpful.
Answer:
This is due to circular references where some components are imported before others, hence beeing undefined. This is quite common and it happened to me many time. The solution is just like the accepted answer: import your component directly.
I can't explain what the actual error is, but there is some problem with the imports from components/index.tsx.
Correcting container/Counter.tsx to:
import CounterComponent from "../components/Counter";
and container/Navigation.tsx
import NavigationComponent from "../components/Navigation";
the error that connect produces will disappear.
Interestingly if you change the following in container/Counter.tsx
import * as all from '../components';
console.log(all)
Previously your code will log an empty object. Once I changed the imports to the way above - it logs the entire object with the components as entries.