How to set the next state values based on previous values in React?

Question

Here is an example:

class MyComp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: 'xyz',
      lastName: 'abc';
      fullName: firstName + lastName
    };
  }

Trying the above technique gives me errors. I also tried using this.firstName and this.lastName but that also resulted in errors. How should I proceed?

Thanks.

What previous values? The constructor runs when the component is first created. There is no "previous" anything. — Quentin, Jun 24 '22 at 09:16
@Quentin So there is no way to set `fullName` based on `firstName` and `lastName`? — Real Noob, Jun 24 '22 at 09:18
Do it after you've create the object with just `firstName` and `lastName` — bui, Jun 24 '22 at 09:19
Oh, **that's** what you mean. Here's a duplicate question: https://stackoverflow.com/questions/4616202/self-references-in-object-literals-initializers with lots of existing answers. — Quentin, Jun 24 '22 at 09:19
Thanks @Quentin. I thought it had something to do with `state`. — Real Noob, Jun 24 '22 at 09:21

score -1 · Answer 1 · answered Jun 24 '22 at 09:14

You can try as below

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    
    const firstName = 'xyz';
    const lastName = 'abc';
    
    this.state = {
      firstName,
      lastName,
      fullName: firstName + lastName
    };
  }

score -1 · Answer 2 · answered Jun 24 '22 at 09:29

you should use this.state.firstname.....

because you use state in constructor and if you want to access that item you have to define this.state.'your item name'

class MyComp extends React.Component {

constructor(props) { super(props);

const firstName = 'xyz';
const lastName = 'abc';

this.state = {
  firstName,
  lastName,
  fullName: firstName + lastName
};

}

on this you can use this.state.firstname

score -1 · Answer 3 · answered Jun 24 '22 at 10:00

You can set after component mounted, if your scenario allows it.

this.state = {
        firstName: 'xyz',
        lastName: 'abc',
        fullName: null,
    };

then

 componentDidMount() {
    this.setState({
        fullName : this.firstName + this.lastName
    })
}

How to set the next state values based on previous values in React?

3 Answers3