CODEWITHSUNDEEP
reactjstypescript
Jimi
Jimi

Reputation: 1897

Reactjs, typescript unable to set initial state inside component

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>
        )

    }
}

Upvotes: 1

Views: 5462

Answers (3)

Mayank Shukla
Mayank Shukla

Reputation: 104369

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);
})

Upvotes: 1

Ematipico
Ematipico

Reputation: 1244

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)
  }
}

Upvotes: 2

rakibtg
rakibtg

Reputation: 5901

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 )
  } )
}

Upvotes: 3

Related Questions