Reactjs, typescript unable to set initial state inside component

Question

I'm very new to React. I have a component that renders fine, when I try to initialise the state, it says It cannot find the name, as I have not declared it yet, so how do I initialise it properly? I'm using:

"react": "^15.5.4", "react-dom": "^15.5.4",

The component errors here on the line below:

export class Profile extends React.Component<{}, state> {

constructor(props){
    super(props);
    this.state = [{name: 'baz'}, {name: 'shaz'}];
}

public render() {
    return (
        <section>
         <section>
             <h3>profile 1</h3>
             <div>baz</div>
         </section>
            <section>
                <h3>profile 2</h3>
                <div>shaz</div>
            </section>
        </section>
        )

}


 ReactDOM.render(
   >> this is where I call <Profile />,
    document.getElementById('app'),
)

Edit

So I managed to solve the issue with everyones help:

interface State {
    name: string;
}

export class Profile extends React.Component<{}, State> {
    public state: State;

    constructor(props){
        super(props);
            this.state = {
               name: 'baz111'
            };
    }

    public render() {
        return (
            <section>
             <section>
                 <h3>profile 1</h3>
                 <div>baz</div>
             </section>
                <section>
                    <h3>profile 2</h3>
                    <div>{this.state.name}</div>
                </section>
            </section>
        )

    }
}

rakibtg · Accepted Answer · 2017-06-06 12:13:19Z

3

this.state is just an object. In this scenario you can run a loop on this.state object to get the value of each name, or if you want you can set all the name under another parent object, for example: let say you want to store names under users key. That would be,

constructor(props){
  super(props);
  this.state = {
    users: [
      {name: 'baz'}, {name: 'shaz'}
    ]
  };
}

Now you should loop on this.state.users to get the name values.

Example,

// Loop using es6 map
componentWillMount() { 
  this.state.users.map( user => {
    console.log( user.name )
  } )
}

edited Jun 6, 2017 at 12:13

answered Jun 6, 2017 at 12:09

rakibtg

5,96112 gold badges53 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jimi Over a year ago

hmm that didn't work either. I got: error TS2304: Cannot find name 'state'.

rakibtg Over a year ago

I have added an example code on how you can get the data

rakibtg Over a year ago

@Jimi you can use this code in componentWillMount to test

Jimi Over a year ago

I can't access the state as it's not present. So I can't iterate it, access it's objects etc.

blömpæ Over a year ago

Should we use map or forEach?

|

Ematipico · Accepted Answer · 2017-06-06 12:38:18Z

2

As people said already, this.state has to be an object.

I think the real problem is when you initialize your component.

export class Profile extends React.Component<{}, state>

You see that state? That's the default state! As you didn't declare it, that's undefined. Please remove it or set it as void. Or, you can define it outside of your component:

1 - First alternative

export class Profile extends React.Component<{}, void> {
   constructor(props) {
    super(props)
    this.state = {
      users: [/* what you need */]
    }
  }
}

2 - Second alternative

type state {
    {
      users: [/* what you need */]
    }
}

export class Profile extends React.Component<{}, state> {
   constructor(props) {
    super(props)
  }
}

answered Jun 6, 2017 at 12:38

Ematipico

1,2441 gold badge10 silver badges14 bronze badges

4 Comments

Jimi Over a year ago

I'm very new to React so trying to cram all this in. State was not defined at all so I could not set it. I guess I could have a constant as the default, like you're suggesting.

Ematipico Over a year ago

Are you using flow for type checking?

Jimi Over a year ago

your work around seems to get my past the compile error for the undefined param. When I try to access any of the items in state I get this error: error TS2339: Property 'users' does not exist on type 'Readonly<state>'. webpack: Failed to compile.

Ematipico Over a year ago

So try to remove the code <{}, state> from your code base. Adding some type checking has some restrictions that for now, as you are new to React, it would add more complexity. So stick with the first alternative

Mayank Shukla · Accepted Answer · 2017-06-06 15:15:00Z

1

State is an Object.

Write it like this to define the data in state:

this.state = {
   data: [
       {name: 'baz'}, 
       {name: 'shaz'}
   ]
}

Then access the state values by this.state.data.

Update:

Data is an array so you need to use map to print all the values, if you want to print specific value then access that by using the index of that item:

this.state.data[0].name   --->   baz

this.state.data[1].name   --->   shaz

By using map:

this.state.data.map(el => {
   console.log('name', el.name);
})

edited Jun 6, 2017 at 15:15

answered Jun 6, 2017 at 12:05

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

5 Comments

Jimi Over a year ago

I realise this, the problem is, no matter how I do this, I get errors. I pasted your code and I got: error TS2304: Cannot find name 'state'.

Mayank Shukla Over a year ago

data is an array, you need to access that by this.state.data[0].name

Mayank Shukla Over a year ago

can you show how you are accessing the name value ?

Jimi Over a year ago

I can't, state is undefined. Webpack can't compile the component for me to even run it.

Jimi Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Reactjs, typescript unable to set initial state inside component

3 Answers 3

10 Comments

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related