Why do I have 'props' passed as parameter in ReactJS and it doesn't happen when I use ReduxJS?
for example:
React app:
constructor(props){
super(props);
this.state = {
memeLimit: 10
}
}
Redux app:
constructor(){
super();
this.state = {
memeLimit: 10
}
}
Thank you
The reason to use super(props); is to be able to use this.props inside the constructor, otherwise you don't need super(props);
For example
constructor(props){
super(props);
this.state = {
memeLimit: this.props.memeLimit // Here you can use this.props
}
}
This is equivalent to
constructor(props){
super();
this.state = {
memeLimit: props.memeLimit // Here you cannot use this.props
}
}
This not really related to Redux Vs React
You can check this for more details: What's the difference between "super()" and "super(props)" in React when using es6 classes?
Related
I was wondering where does the property this.state comes from when using React with TypeScript?
public constructor(props: any) {
super(props);
this.state = {
userName:"Code to html, one way -->",
password:""
};
}
We are not importing it in the super() call, so where does it comes from?
It comes from the internal implementation of React component which you inherit by extending the class React.Component:
class MyComponent from React.Component {
// this.setState, this.state,
// lifecycle methods and more
}
See React.Component and its instance properties.
where does it comes from?
It comes from the constructor. The line you are asking about is exactly where this.state is initialized.
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 this component:
class Logos extends React.Component<{}, LogosState> {
...
public constructor() {
super({});
...
}
}
I have understood from here that I do need to pass arguments to super even when a component has no props.
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/20987#issuecomment-339216734
My conclusion was to try the code above. But I get the warning:
Warning: Logos(...): When calling super() in `Logos`, make sure to pass up the same props that your component's constructor was passed.
How to solve this problem?
I ended up doing this. The other answers posted before this were helpful and led me to this solution, but were not complete:
class Logos extends React.Component<{}, LogosState> {
...
public constructor(props: {}) {
super(props);
...
}
}
public constructor(props) {
super(props);
...
}
Do it like this or
constructor(props) {
super(props);
...
}
You can use this instead.
constructor(){
super()
}
In the official document of react, react recommend we use
constructor(props){
super(props)
}
And the only reason that you should add props is that you want to use this.props in constructor.If you don't want to use this.props,it's ok not to pass props to super.
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.
Suppose I've the following class:
class Tabs extends React.Component {
displayName: Tabs;
static propTypes = {
selected: React.PropTypes.number,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.element
]).isRequired
};
constructor() {
super();
this.state = {
selected: 0,
maxSelected: 0
};
render() {
return(
<div>
{this.props.selected}
{this.props.children}
</div>
);
}
};
I want to know that if passing the following constructor is important:
constructor(props) {
super(props);
}
My current code works just fine but I wanted to know if this is a good practice.
According to Sophie Alpert with the React team it's only necessary to pass props into the constructor if you intend on using this.props inside the constructor. After the constructor is invoked, React attaches the props to the component from the outside.