As you can see below the my react component is not rendering also in vscode its greyed out (line 2 first picture).
Dont know what I am doing wrong
import React, { Fragment, useEffect } from 'react';
import counterComponent from './components/counterComponent';
function App() {
return (
<Fragment >
<h1>hello</h1>
<counterComponent/>
</Fragment>
)
};
export default App;
First of all capitalize your component names. so CounterComponent instead of counterComponent.
Second you're exporting counterComponent twice.
export const ....
and export default in the bottom. Choose one and change your import according to whichever you choose..
You need to import counter component with {}
As its export const
Import {CounterComponet} from …
because you are doing something wrong counterComponents correctly, look at you App.js file or the second Image and look at line number 2(it is a little dark-ish) because you are not using it right.
Also you are default and modular exporting counterComponent do any one of them, I usually do it like this
import React, { Fragment} from "react";
function counterComponent () {
return (
<Fragment>
<h1>hello</h1>
</Fragment>
);
}
export default counterComponent;
If that doesn't work, My suggestion is check again if there is not any spelling mistake or you are importing from the right location
Related
I am trying to create a simple page which two main parts: Menu and Guide. In my App,tsx, I have:
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
This is fine.
But, in the ./Guide/Guide.tsx, I have:
import React, { Component } from "react";
import Menu from "./Menu/Menu";
export default class Guide extends Component {
constructor(props: {}) {
super(props);
}
return (
<Menu />
);
}
Menu.tsx:
import React, { Component } from "react";
export default class Menu extends Component {
return (
<h1>Test</h1>
);
};
However I'm getting the error 'return', which lacks return-type annotation, implicitly has an 'any' return type..
What's going on here?
You can probably tell I'm very new to React and TypeScript!
In class component (such as your Guide and Menu components), you render some HTML code inside the render function. Insinde functional components (such as your App component), you render some HTML code inside the return function. Here you are mixing those 2 different syntax, that is why you are getting this error.
In order to fix this, simply replace your return function in the Menu and Guide components by the render function
I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element
The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;
You need to import React in every file that exports a component (App in this case).
The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of App.
App.js
import React, {Component, Fragment} from 'react';
import {Typeahead, Control} from 'react-typeahead';
import {FormGroup} from 'react-bootstrap';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
multiple: false
}
}
render() {
const {multiple} = this.state;
return (
<Fragment>
<Typeahead
labelKey="name"
multiple={multiple}
options={[
'Waylon Dalton',
'Justine Henderson',
'Abdullah Lang',
'Marcus Cruz',
'Thalia Cobb',
'Mathias Little',
'Eddie Randolph',
'Angela Walker',
'Lia Shelton',
'Hadassah Hartman',
'Joanna Shaffer',
'Jonathon Sheppard'
]}
placeholder="Choose a state..."
/>
<FormGroup>
<Control
checked={multiple}
onChange={(e) => this.setState({multiple: e.target.checked})}
type="checkbox">
Multi-Select
</Control>
</FormGroup>
</Fragment>
)
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
I created this project using CRA. This error states that there is something wrong in my import/export but i don't find anything wrong in my import/export of both the files, error is focusing on App.js render function and also render of index.js file. I also checked here but it didn't work for me, can someone help me.
Your App import/export is ok.
I think you mixed up the Fragment import (it's part of React) and the Control import:
import React, {Component, Fragment} from 'react';
import {Typeahead} from 'react-typeahead';
import {FormGroup, FormControl as Control} from 'react-bootstrap';
I have had the same issue. In my case it was me using the wrong HOCs from MobX, namely observable instead of observer.
If you have made the same mistake you can fix it by switching
export default observable(MyReactComponent);
to
export default observer(MyReactComponent);
Not so sure if this will help, but this solved it for me.
First code to bring the same error
import React from 'react';
import { BrowserRouter , Route, Link} from 'react-dom';***
import './App.css';
Then I realized that it's actually supposed to be
import React from 'react';
import { BrowserRouter , Route, Link} from 'react-router-dom';***
import './App.css';
Check import statements
It may be likely that your import statements are not importing from the correct files. Make sure that they are all correct.
example:
import { Link } from "react"; // oops! hard to see, but that's the wrong file.
import { Link } from "react-router-dom"; // that's better
Check spelling of components
// what's wrong with this?
const pageOne = () => {
return (<Link to="/pagetwo"> pagetwo </Link>); // oops! spelling of the component is wrong!
};
const pageTwo = () => {
return (<Link to="/"> pageone </Link>);
};
They're not going to work because the spelling of the components are not right. It's easy to spot when you know what you're looking for.
Give your options element a key attribute having a unique id/key like...
<options key={value}>
some dummy options here
<options/>
This should solve the problem.
I tried Commanding all my code and after that I opened them one by one, per function. then the error disappeared. It's weird but that's my way of fixing it.
I think the issue resides here:
import {Typeahead, Fragment, Control } from 'react-typeahead';
The Typeahead import is okay but I think Fragment and Control are the source of your error. Can upi please try to remove them and see if that helps?
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));
I'm learning React Native, just curious about the parentheses in the first line of import
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Why wrap Component with {} but not React?
React is the default export (there can only be one of these per module). Default exports can be imported like this:
import React from "react";
Component is a named export (there can be many of these). Named exports are imported like this:
import { Component } from "react";
What you're seeing is both of these things imported on the same line.
default exports aren't automatically available everywhere, so they still need importing.
Note that the reason React needs importing at all is because of the way that JSX is transformed into JS - React needs to be available so <Text> can be transformed into React.createElement(Text, ....
I think it's just a matter of shorting the next invocations, since Component is a subclass of React, so that way you use React as default with all it has in it. and Component as a single class you'd use. By the way you use braces in import when you want something specific as a method or class, that is named export. There's a better explanation in here.
Having both named exports and a default export in a module
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}