What is the proper way to add console.log and debugger statements to my React.Components?
Just dropping them in produces Unexpected token errors:
export class ManageCoursePage extends React.Component {
debugger;
constructor(props, context) {
super(props, context);
A little more helpful but still produces Unexpected 'debugger' statement:
export class ManageCoursePage extends React.Component {
constructor(props, context) {
super(props, context);
debugger;
Or even browsers' console errors out Uncaught SyntaxError: Unexpected token ;:
class Woot {
debugger;
}
What exactly is going on here?
Move your debugger statement inside the constructor or a function and it'll work fine.
Related
Should I include the props argument in the constructor and call to super if I am not using props at all for a component?
For example, if I write:
class NotePage extends React.Component<void, State> {
constructor(){
super();
this.state = {
filterStr: "string"
};
}
...
}
Will this cause any issues?
I'm asking because if I include props then flow complains about a missing annotation and one way to solve the problem is to remove the props argument.
From official docs React Constructor
you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs
constructor(props) {
// no super call
}
If you don't call it, the data passed from parent as properties is not available inside child component's constructor with props. Props will, however, still be available in the rest of the component, such as the render function.
e.g.
class Parent extends React.Component{
render(){
return (<Child mydata = {'some data here'}/>)
}
}
class Child extends React.Component{
constructor(){
super(); //no props
this.props.mydata //will be undefined
}
render(){
this.props.mydata //defined
}
}
First of all you don't need constructor function at all, when you are not accessing props in initialization of component. You can write your state this way:
class NotePage extends React.Component<void, State> {
state = {
filterStr: "string"
}
...
}
Only when you are using props for initialization you need to , make use of constructor and call this way:
class NotePage extends React.Component<void, State> {
constructor(props){
super(props);
this.state = {
filterStr: "string"
};
}
...
}
Hope this helps !!
I found a great link written by #dan Abramov (react core team). this also might help people understanding super(props). Link
I'm compiling my Reactjs application with sbt.
Browser exception
Uncaught SyntaxError: Unexpected token :
Compilation error
Parse Error: Line 2: Unexpected token = In C:\Users\martin\Documents\Web Projects\example-app\app\assets\javascripts\nav.jsx:2 1class Nav extends React.Component { 2 static propTypes = { 3 user: React.PropTypes.object 4 }; 5 6 constructor() {
Reason?
I'm not sure why yet, but the browser (Chrome) likes the syntax one way and the sbt compiler does not.
When I change static propTypes = { to static propTypes: { the compiler no longer complains, but the browser does.
Code
static propTypes: {
user: React.PropTypes.object
};
constructor() {
super();
}
state: {};
componentDidMount() {
$.getJSON("./mock-database/users.json", (json) => {
this.setState({user: json});
});
}
The compiler is probably not setup to enable static class properties. In most cases it's easier to define your proptypes outside of the class and it should compile just fine.
class YourClass extends Component {
render() {
}
}
YourClass.propTypes = {
user: PropTypes.object.isRequired
}
I have recently started working with React and getting understanding of how the framework works,
I have two pieces of code below , just wondering that what's the difference between them (of-course I am not asking about the syntactical differences) and why one of them gives error.
this one works
interface Square {
value:String;
}
class Square extends React.Component<Square,{}> {
}
this one gives following error
[ts] Generic type 'Component' requires 2 type argument(s).
class Square extends React.Component {}
I have seen many examples on the net which extend React.Component for writing new components, I think I am missing something here.
Because you are using TypeScript.
The code you saw on the internet class xxx extends React.Component is just ES6 code.
Here is a simple React code written in TypeScript:
interface SomeProps {
blabla: string;
}
class SomeComponent extends React.Component<SomeProps, any> {
constructor(props: SomeProps) {
super(props);
}
render() {
return <h1>{this.props.blabla}</h1>;
}
}
This is what I would like to do:
constructor(props, store) {
props.store = store;
super(props);
};
I get the following error:
Uncaught TypeError: Can't add property store, object is not extensible
I understand that properties are immutable in ReactJS. So how can I clone, then augment the existing properties?
UPDATE 1
Some background: I'm basically trying to avoid a this._store "private" variable, and would rather have it in the props, since the value is known at object creation time and will not change.
My class hierarchy is as follows:
import SpeakersStore from ...;
class SpeakersViewController extends ItemsViewController {
constructor(props) {
super(props, SpeakersStore);
};
...
};
class ItemsViewController extends React.Component {
constructor(props, store) {
props.store = store;
super(props);
};
...
};
You should be able to do the following:
constructor(props, store) {
super({...props, store});
}
If you're in an environment where the object spread operator (the {...props} construct) is not available, then you can use Object.assign:
constructor(props, store) {
super(Object.assign({}, props, {store});
}
However, if this is a constructor for a React component, be aware that the second argument to the constructor for React.Component is context, and you won't get the behavior you're looking for.
I upgraded to babel version 6 and I am using "es2015", "react", "stage-0" as presets. I am working with react using es6 syntax.
Everything was working fine until the upgrade. After the upgrade I started to get exceptions in places where I make super call to parent constructor.
For example for the following class:
class childForm extends ParentForm {
constructor(props, context) {
console.log("this get printed.");
super(props, context);
console.log("this is not printed");
}
...
}
class ParentForm extends React.Component {
constructor(props, context) {
console.log("this is printed");
super(props, context);
console.log("this is printed too");
}
...
}
class AnotherComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
myService.findById(this.props.params.id).then(result => {
this.setState({result: result});
}).catch(err => {
/**** Error is catched here ******/
console.log(err);
});
}
render(){
return <div>{this.state.result && <ChildForm/>}</div>
}
}
I got the following errors on the console:
TypeError: (0 , _typeof3.default) is not a function(…)
ReactCompositeComponent.js?cd59:443 Uncaught (in promise) TypeError: Cannot read property 'context' of null(…)
React function that throws the error is the following function. The exception raised at ReactCompositeComponentMixin.updateComponent
updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {
var inst = this._instance;
var nextContext = this._context === nextUnmaskedContext ? inst.context : this._processContext(nextUnmaskedContext);
....
If I carry all the functionalities of the parent class to child class, it works as expected. Do anyone encountered a similar problem?
Also is it possible to have better exception messages using some library or plugin for react?
This might be an issue around class compilation. It looks like it can cause an error currently if the child class is declared before the superclass.
Trying this on babeljs.io currently results in an error:
class A extends B {
constructor(x) {
super(x);
}
}
class B {
constructor(x) {
console.log(x);
}
}
new A('a');
Try changing the order of the class definitions:
class ParentForm extends React.Component {
constructor(props, context) {
super(props, context);
}
...
}
class childForm extends ParentForm {
constructor(props, context) {
super(props, context);
}
...
}
EDIT: It seems that Chrome's classes behave pretty much the same, Uncaught ReferenceError: B is not defined(…) is thrown at declaration.
Installing babel-runtime#6.3.19 should solve the problem. Checkout the issue https://phabricator.babeljs.io/T6644