What's the difference between declaring state as given below:
export default class BlackFade extends React.Component {
state = { fListData : [] }
}
export default class BlackFade extends React.Component {
constructor(props) {
super(props);
this.state = { fListData : [] }
}
}
Both of them are doing the same job
First one state = { fListData : [] } is making use of
class property proposal which is stage 3 proposal under the hood which is doing the same job as :
constructor(props) {
super(props);
this.state = { fListData : [] }
}
NOTE: There are total 4 stages of a proposal after that , proposal will be a part of a Language
You can compare and check both of them on Babel Transpiler
Related
Am new to reactjs and am implementing a to do app using controlled component but am getting an error. Type Error: this.state is null!
Have you initialized your state in a constructor? You can do this by creating a constructor function in your class, e.g.
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {todoList: []};
}
Then you can add your todo's by doing this:
let todoListChange = this.state.todoList;
todoListChange.push("Clean my toilet");
this.setState({todoList: todoListChange});
You have not initialized your state. Default state is null.
class App from React.Component {
constructor (props) {
super(props);
this.state = { todos: [] }
}
render () {
// your implementation
}
}
I have to call function inside constructor as working from call backs which i have to include in constructor but this is "undefined" in constructor.
class XXXXX extends React.Component {
constructor(props) {
super(props);
this.state =
{
chargebeeInstance : windowChargebeeinit({
site: "xxxxxxxxxxxxx-test"})
}
this.statechargebeeInstancesetCheckoutCallbacks(function(){
return{
close:function(){
this.moveToNextStep();
}
}
})
}
moveToNextStep(){
this.props.jumpToNextStep(3);
}
I am not able to call moveToNextStep as this is undefined
this is scope issue, you have to preserve scope before this.statechargebeeInstancesetCheckoutCallbacks function mentioned below
class XXXXX extends React.Component {
constructor(props) {
super(props);
const me = this
this.state =
{
chargebeeInstance : windowChargebeeinit({
site: "xxxxxxxxxxxxx-test"})
}
this.statechargebeeInstancesetCheckoutCallbacks(function(){
return{
close:function(){
me.moveToNextStep();//scope issue, this will not be available here
}
}
})
}
moveToNextStep(){
this.props.jumpToNextStep(3);
}
Hope this will help
You need to bind the function up to the current closure. Try this:
class XXXXX extends React.Component {
constructor(props) {
super(props);
// I believe this is what you are missing.
this.moveToNextStep = this.moveToNextStep.bind(this)
this.state = {
chargebeeInstance : windowChargebeeinit({
site: "xxxxxxxxxxxxx-test"
})
}
this.statechargebeeInstancesetCheckoutCallbacks(function(){
return{
close:function(){
this.moveToNextStep();
}
}
})
}
moveToNextStep(){
this.props.jumpToNextStep(3);
}
}
I have a React.Component and i want to call this static function from the many different React.Component.
class Categories extends React.Component {
constructor(props) {
super(props);
this.getCheckedCategories = this.getCheckedCategories.bind(this);
this.state = {
checked: [],
unchecked: []
};
}
static getCheckedCategories() {
return this.state.checked;
}
}
So I tried to connect the function.
import Categories from './product/checkboxes';
class FullWidthGrid extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const { classes } = this.props;
const checkedCategories = Categories.getCheckedCategories();
}
}
static functions can't access this, i.e. static method calls are made directly on the class and are not callable on instances of the class. You can read more on that here.
So in your case you could do:
class Categories extends Component {
state = {
checked: [],
unchecked: []
};
static getCheckedCategories = (klass) => {
return klass.state.checked
}
render() {
return (
<div>{Categories.getCheckedCategories(this)}</div>
);
}
}
Working example here.
That's the purpose of static function. It cannot access the instance (this).
You can have multiple instances of class but only one static function/property.
As a workaround (depend on what you want to do), you can use static property to store your state:
class Categories extends React.Component {
constructor(props) {
super(props);
Categories.state = {
checked: [],
unchecked: []
};
}
static getCheckedCategories() {
return Categories.state.checked;
}
}
However it won't work with setState since it is an instance method.
Imagine situation when you have muptiple Categories components and each one has different checked/unchecked categories. What would then Categories.getCheckedCategories() function returns?
If you want to have shared state (checked categories), I would recommend you to pull out the state out of the component. For example store it in parent component and pass it as props to child components. Or use state library like redux. You could also use react's context to manage shared state.
I am starting with my react project on VS2013 working together with ASP.NET MVC. I have configured webpack and configuration seemed working well until I tried to implement the following class.
class Hello extends React.Component {
this.state = { visible: true }
render() {
/** Method definition **/
...
}
I am getting an error Unexpected Token at '.' at 'this.state'. I have already check es2015 is set as babel preset. If I remove state and toggleVisibility assignments, webpack bundles OK.
Any idea what else can I try?
It's a class so the correct syntax should be
class Hello extends React.Component {
state = { visible: true }
render() {
/** Method definition **/
...
}
Also, the recommended way of defining initial state should be
class Hello extends React.Component {
constructor(props) {
super(props)
this.state = { visible: true }
}
render() {
/** Method definition **/
...
}
You should define this.state in a constructor like
constructor(props) {
super(props);
this.state = {
visible: true
};
}
Hence, your code should be
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
render() {}
}
From React docs:
The constructor is the right place to initialize state. If you don't
initialize state and you don't bind methods, you don't need to
implement a constructor for your React component.
I am trying to write my first react control. Here is what I have written
import React from 'react';
import DimensionPickerAction from '../actions/DimensionPickerActions.js';
import MovieLensAppStore from '../stores/MovieLensAppStore.js';
class DimensionPicker extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], currentItem: '' };
}
getInitialState() {
this.state = {
items: MovieLensAppStore.getAttributes(this.props.dimension),
currentItem : MovieLensAppStore.getCurrentAttribute(this.props.dimension)
};
}
onSelectionChange(newValue) {
DimensionPickerAction.selectionChange(this.props.dimension, newValue);
}
render() {
var optionNodes = this.state.items.map((item) => {
if (item === this.state.currentItem)
return(<option value="{item}" selected>{item}</option>)
else
return(<option value="{item}">{item}</option>)
});
return(<div><select onchange="onSelectionChange">{optionNodes}</select></div>);
}
}
export default DimensionPicker;
Very surprisingly, I get an error
Warning: getInitialState was defined on DimensionPicker, a plain JavaScript
class. This is only supported for classes created using React.createClass. Did
you mean to define a state property instead?
I find this very confusing because clearly my component derives from React.Component
Eric's comment is correct. You're using ES6 classes, which means that getInitialState is not supported. You'll need to change this:
class DimensionPicker extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], currentItem: '' };
}
getInitialState() {
this.state = {
items: MovieLensAppStore.getAttributes(this.props.dimension),
currentItem : MovieLensAppStore.getCurrentAttribute(this.props.dimension)
};
}
to this:
class DimensionPicker extends React.Component {
constructor(props) {
super(props);
this.state = {
items: MovieLensAppStore.getAttributes(props.dimension),
currentItem : MovieLensAppStore.getCurrentAttribute(props.dimension)
};
}
What about this, if you like to save the initial state construction somewhere for later use:
class DimensionPicker extends React.Component {
constructor(props) {
super(props);
this._getInitialState = this._getInitialState.bind(this)
this.state = this._getInitialState();
}
_getInitialState() {
return { items: [], currentItem: '' }
}