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.
Related
I'm working in a new codebase. Normally, I would set up state like this in a React component:
class App extends React.Component {
constructor() {
super();
this.state={
foo: 'bar'
}
}
....
In this new codebase, I'm seeing a lot of this:
class App extends React.Component {
state={
foo: 'bar'
}
....
Is there an advantage to doing it this way? They seem to only do it when state doesn't need to be altered. I always thought of state as being something React handled. Is this an ok thing to do?
The end result of both approaches is the same. Both approaches are just setting the initial state of the component. It's worth noting that class properties are a stage 3 proposal, so all development environments may not be able to use them.
I personally like to use the class field variant if nothing else is done in the constructor, as it is less code to write, and you have no super call to worry about.
Example
class Component1 extends React.Component {
state = { value: this.props.initialValue };
render() {
return <div> {this.state.value} </div>
}
}
class Component2 extends React.Component {
constructor(props) {
super(props);
this.state = { value: props.initialValue };
}
render() {
return <div> {this.state.value} </div>
}
}
function App() {
return (
<div>
<Component1 initialValue={1} />
<Component2 initialValue={2} />
</div>
);
}
Actually both of them bind to this pointer. the this that made in constructor of class.
Totally you can access to local state by this.state but in first style you can pass props to constructor by super and then use it in state declaration, just like below:
class App extends React.Component {
constructor(props) {
super(props);
this.state={
foo: 'bar',
jaz: props.someParentState,
}
}
....
Awesome, you can access to props in constructor, isn't pretty? I definitely use this style for local state declaration.
Hope this helps you.
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
}
}
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?
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