I am trying to make use of a JSX.Element within a React application. The compiler is unhappy though.
I have two files Main.tsx and EmployeeMask.js. For some reason I am not sure of I cannot use EmployeeMask in its JSX form <EmployeeMask /> as it is not understood as a JSX component.
Here is my Main.tsx file:
export interface MainProps {}
export interface MainState {}
export class Main extends React.Component<MainProps, MainState> {
public constructor(props: any) {
super(props);
}
private maskChooser(): JSX.Element {
return <EmployeeMask />;
}
public render() {
return <div>
{this.maskChooser()}
</div>;
}
}
Here is my EmployeeMask.js file:
import React from 'react';
export class EmployeeMask extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
EmployeeMask
</div>
)
}
}
The compiler tells me the following though:
(alias) class EmployeeMask
import EmployeeMask
'EmployeeMask' cannot be used as a JSX component.
Its instance type 'EmployeeMask' is not a valid JSX element.
Type 'EmployeeMask' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786)
I already tried adding export default EmployeeMask;, but this did not change anything.
Why does the compiler not recognize this as a JSX.Element?
You seem to be calling <EmployeeMask />, but the exported component's name is EmployeeMask2, which means it should be called like <EmployeeMask2 />.
This happens because it is a regular export (export class instead of export default class), so when you import it, you have to use something like import {EmployeeMask2} from '<path>/EmployeeMask.js'.
If you used a default export, you could call it however you want in your file, like:
import Whatever from '<path>/EmployeeMask.js'
I got the answer and wanted to post it here in case someone has had the same problem. I found this online TypeScript to JavaScript transpiler in which I could transpile a working TypeScript class into JavaScript in order to compare and find out what was the problem before.
Diffing the result with what I had showed that the import was the problem.
import React from 'react';
instead of
import * as React from 'react';
Correcting this by adding "* as " solves the problem and makes the class usable.
Related
I am new in Reactjs and I want to know what is the difference between "react functional component"
and "react functional component export"?
Here is react functional component code
import React from 'react'
export default function Test() {
return (
<div>Test</div>
)
}
Here is "react functional component export"
import React from 'react'
function Test() {
return (
<div>Test</div>
)
}
export default Test
I want to add more context to your question: I suppose your question comes from the different snippets rfc and rfce of ES7+ React/Redux/React-Native snippets extension in VScode.
Two both cases do the same thing. The differences are the syntax of export. It's not particular to ReactJS but about JavaScript.
1st case: you use export directly before the declaration function line.
2nd case: you declare a function first and later use export with the function's name at the bottom of your code.
I'm used to using 2nd case.
You can read more about export syntax variant + named export vs. default export in this link
You mean the difference between Functional Components And Class Components?
The functions you have shared are the same, both are React Functional Component
React Class Components: is a class component requires you to extend from React Component and create a render function which returns a React element.
example:
import React from 'react'
export default class Test extends React.Component {
render () {
console.log(this.props)
return <div>Test</div>
}
}
React Functional Components: is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX)
example:
import React from 'react'
export default function Test(props) {
console.log(props)
return (
<div>Test</div>
)
}
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 keep getting this error from ESLint on my component.
ESLint: says Prefer Default Export (import/prefer-default-export)
Here's is how the component looks
export class mycomponent extends React.Component {
render() {
//stuff here
}
}
What is it asking for? How can I fix this?
you need to specify your export as default like this:
export default class mycomponent extends React.Component {
render() {
//stuff here
}
}
(notice the added word default) and then in other files you may import your component with:
import mycomponent from './mycomponent.js';
assuming that the component is being included from within the same directory and is defined in the file mycomponent.js.
You can also avoid having a default export if your file contains multiple exported things with names such as:
export const foo = 'foo';
export const bar = 'bar';
or you could even leave your original file exactly as it is without the word default and import it using a batch import:
import * as mycomponent from './mycomponent.js';
I've a react component, Let's say component_1.
And, my array is of the form, let's say, array_list =[{},{},{},{}].
I'm trying to render this component inside my another component, component_2, like so:
import component_1 from 'component_1'
import array_list from 'array_list'
class component_2 extends Component{
constructor(props){
super(props)
}
render(){
const {renderMenu} = this.props
var contentData = [];
array_list.forEach(function(item, index, array){
contentData.push(<component_1 {...item} />);
});
return(
<div>
<div className="ui four column centered grid">
{contentData}
</div>
</div>
)
}
}
export default component_2
while, it generally works with other HTML elements. Here it throws an error:
React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `OnBoardingContentElement`
Can render an array of react component's this way? If not, then is there any circumvent approach for this?
Are you sure your import statement is working? Also look into array.map, it is perfect for turning an array of object data into an array of components.
This is a follow up to #John's answer.
I ran into this exact problem last night. Here's what I was doing:
// MyComponent.js
export const MyComponent = (<h1>Hello, world</h1>);
// index.js
import { MyComponent } from './MyComponent';
React.render((<MyComponent />), document.getElementById('root'));
Can you see the error? It's kind of subtle.
The problem is that the MyComponent.js is NOT exporting a React component. It's exporting a React element that's already instantiated.
#John is suggesting that this might be what you're doing. The best way to correct it is the ensure that MyComponent.js is actually exporting a component:
// MyComponent.js
export const MyComponent = () => (<h1>Hello, world</h1>);
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>
);
}
}