The following is giving me an error in React v16.0. The error I'm getting is:
TypeError: Cannot read property 'createElement' of undefined
import { React, Component } from 'react';
class MyComponent extends Component {
render() {
return(
<div>Hello World!</div>
);
};
};
If I change it to the following, it works.
import React from 'react';
class MyComponent extends React.Component {
// Omitted for brevity
}
I'm aware of some changes from v15.x to 16.x but I'm not clear about this one.
Your import needs to be the following: import React, { Component } from 'react';
React is your standard default export as before but Component is a named export.
Related
So, I just started with react and i'm having troubles displaying my class component in the browser.
Here's my code...
import React, { component } from 'react'
class Hello extends component {
render() {
return <h1>class component</h1>
}
}
export default Hello
The problem is in component, it should be Component (in PascalCase)
I'm using a ES7 React/Redux/GraphQL/React-Native snippets in VS Code and I'm not sure which "type" of export use. If export should be at the class / functional component declaration or at the end of the file.
In the code below, I have 2 class components exports and 3 functional components exports.
Which of these is reccomended?
// ****************************************
// 1. rcc
// ****************************************
import React, { Component } from 'react'
export default class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
// ****************************************
// 2. rce
// ****************************************
import React, { Component } from 'react'
class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
export default myComponent
// ****************************************
// 3. rfc
// ****************************************
import React from 'react'
export default function myComponent() {
return (
<div>
</div>
)
}
// ****************************************
// 4. rfce
// ****************************************
import React from 'react'
function myComponent() {
return (
<div>
</div>
)
}
export default myComponent
// ****************************************
// 5. rafc
// ****************************************
import React from 'react'
const myComponent = () => {
return (
<div>
</div>
)
}
export default myComponent
My second question is about functional components - It is better (recommended) to write a functional component as an arrow function or classical function declaration?
Thanks a lot!
Dan Abramov said in his tweet:
JS tip: no matter which export style you prefer (default or named) or
which function style you use (arrow or declaration), make sure your
functions have names! Especially important for React components to
show up named in DevTools and warnings.
And, between using rce and rcc for exporting class components: It's up to you to decide, however, as in CRA documentation rce is used:
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
With this style, you can use HOCs easily, for this example we want to warp our class component into a Higher Order Component provided by a library:
import { injectIntl} from "react-intl";
class Button extends React.Component {
render() {
const intl = this.props.intl;
const title = intl.formatMessage({
id: "button.title",
defaultMessage: "Hello!"
});
return <Button title={title}>...</Button>;
}
}
export default injectIntl(Button);
And between using the Functional components vs Class components: Please refer to the documentation, functional components are easier to write and to test, and now with React's useState hook you can use state in your functional components. For class components read React.Component documentation.
if you want to export multiple component in a file then you have to use only export ComponentName (without default).
then you can import as
import {ComponentA,ComponentB,...} from '../directory'
the other case is that you can export only one component in a file as
export default Class extends ........{} //
or
export default Class; // at the end of file
Both are same.
and you can import with any name
import Class from '../directory'
import * as react from 'react'
import { propsModel } from '...'
...
...
class MyComponent extends React.Component<any, propsModel> {
render () {
....
}
}
can create component like this ? why i did't see this way on reactjs.org and use this way cant export default, but export fine
I have the following TypeScript (v3.01) React component named TopBar to which I'm now adding React-Redux. The TopBar component is then referenced in a parent component named Layout.
import * as React from 'react';
import { connect } from "react-redux";
import { decrementZoomLevel, incrementZoomLevel, setCenterPoint, setZoomLevel } from '../store/actions';
class TopBar extends React.Component<any, any>{
...
};
/*
* Redux-React setup
*/
const mapStateToProps = (state: any): any => {
return {
centerPoint: state.centerPoint,
zoomLevel: state.zoomLevel
}
}
export default connect(mapStateToProps)(TopBar);
However, when I reference this component in another Layout TypeScript component
import * as React from 'react';
import { TopBar } from './TopBar';
export class Layout extends React.Component<any, any> {
...
};
I get the following TypeScript error
(TS) Module: "C:/....../TopBar" has no exported member 'TopBar'.
Prior to adding the React-Redux code the class definition was
export default class TopBar extends React.Component<any, any>{
...
};
and I was able to reference the TopBar component in Layout w/ no errors.
Now that I'm adding the React-Redux connect() statement how do I properly reference TopBar in another component?
It is a default export, you have to import this way.
import * as React from 'react';
import TopBar from './TopBar';
export class Layout extends React.Component<any, any> {
...
};
I have a container component:
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
class MyComponent extends Component {
static propTypes = {
someEntities: PropTypes.object.isRequired
}
....
}
export default connect(state => ({ someEntities: state.someEntities })(MyComponent)
So I am passing props via connect to this component, but when I place component in code, like:
....
import MyComponent from './MyComponent';
....
<div><MyComponent /></div>
....
WebStorm highlights MyComponent and gives me an error: Element MyComponent doesn't have required attribute someEntities.
I am using version 2016.3.1. Is this an error? Should I use propTypes in this case?
This is a known issue, tracked as WEB-21692; please follow it for updates (https://intellij-support.jetbrains.com/hc/en-us/articles/207241135-How-to-follow-YouTrack-issues-and-receive-notifications)