Object property become undefined after call setState

Question

i'm new at React js, i want to ask, i have a object, i want to update some property from the object, but when i change one property from the object, another property is update too and the value is undefined i try to using spread operator but when i running, it show error not defined. This is my code

export default class Message extends React.Component {
  constructor(props){
    super(props);
      this.state = {
        isLoggedIn: SystemStore.isLoggedIn(),
        profile: ProfileStore.getProfile(),
        messageInfo: {
          fullName: SystemStore.systemUser().fullName,
          site: '',
          email: '',
          phone: '',
        },
        subject: '',
        description: '',
        type: '',
        errorMessage: '',
        errorDialog: '',
        isSubmited: false,
        successMessage: '',
        submitting: false
      };
....
  clearForm(){
    this.setState({
      messageInfo: {
        ...messageInfo, //in here i get error messageInfo is not defined
          subject: '',
          description: ''//if doing this i get error SyntaxError
      }})
  }


  handleProfileChange(){
    this.setState({
      messageInfo: {
        ....messageInfo, site: ProfileStore.getProfile().primarySite.name,
      }});
    console.log(this.state.messageInfo.fullName);
    console.log(this.state.messageInfo.site);
  }

  handleSubjectChange(evt){
    this.setState({ subject: evt.target.value }, () => {
      if(this.state.messageInfo.subject === 'PRAYER') {
        this.setState({ type: 'REQUEST' });
      } else if(this.state.messageInfo.subject === 'ADDRESS') {
        this.setState({ type: 'INFORMATION' });
      } else if(this.state.messageInfo.subject === 'VISIT'){
        this.setState({ type: 'REQUEST' });
      }
    });
  }
    
  handleMessageChange(evt){
    this.setState(prevState=>({
      messageInfo: {
        ...prevState.messageInfo, description: evt.target.value
      }}));
  }

Any suggestion where i got wrong? Thank you

@CertainPerformance, the code has trimmed, Thank you – Marvin Paulus Sep 10 '20 at 05:14 — Marvin Paulus, Sep 10 '20 at 05:14

score 2 · Answer 1 · answered Sep 10 '20 at 05:16

2

You cannot directly access messageInfo. There are two ways to fetch it:

clearForm(){
    this.setState({
      messageInfo: {
        ...this.state.messageInfo,
          subject: '',
          description: ''
      }
    })
  }

or

clearForm(){
    this.setState((prevState) => {
      messageInfo: {
        ...prevState.messageInfo,
        subject: '',
        description: ''
      }
   })
  }

answered Sep 10 '20 at 05:16

Darshna Rekha

1,069
7
20

i had tried it but its still show SyntaxError Unexpected Token at ...this.state.messageInfo or ...prevState.messageInfo – Marvin Paulus Sep 10 '20 at 05:28

CertainPerformance · Accepted Answer · 2020-09-10T05:30:31.450

2

Your state has multiple properties. If you start out with properties messageInfo and type, for example, and then you do this.setState({ messageInfo: newMessageInfo }), then the new state will have only the messageInfo property; the type property will have been lost, because its value wasn't passed to setState.

Instead, spread the previous state into the calls of setState before defining the new property:

clearForm(){
  this.setState({
    ...this.state,
    messageInfo: {
      ...this.state.messageInfo,
      // ...

and

handleSubjectChange(evt){
  this.setState({ ...this.state, subject: evt.target.value }, () => {

and so on.

edited Sep 10 '20 at 05:30

answered Sep 10 '20 at 05:18

CertainPerformance

356,069
52
309
320

so in the clearForm function there is two setState? – Marvin Paulus Sep 10 '20 at 05:29
There's only one `setState` in it, but you need to spread the previous `messageInfo` state into the new `messageInfo` property. It's not a standalone variable, it's a property of the state, so you have to reference the state to get to it: `...this.state.messageInfo` – CertainPerformance Sep 10 '20 at 05:31
Hmm, it still show SyntaxError: UnexpectedToken at `...this.state, messageInfo:{..` – Marvin Paulus Sep 10 '20 at 05:36
Sounds like either you typed the syntax incorrectly, or your environment isn't configured to understand spread syntax – CertainPerformance Sep 10 '20 at 05:38
for the environment configuration i don't know exactly, but it possible if my environment not configured to understand spread syntax – Marvin Paulus Sep 10 '20 at 05:45
Try: `const obj = {}; const obj2 = { ...obj }` That'll tell you whether the issue is with your environment or with this particular script – CertainPerformance Sep 10 '20 at 05:45
where i suppossed to put `const obj = {}; const obj2 = { ...obj }`? – Marvin Paulus Sep 10 '20 at 05:51
Anywhere. At the top of your script would work - just type it in to see if the syntax is recognized. – CertainPerformance Sep 10 '20 at 05:51
where `const obj2` called? Because it gets `obj2 was defined but never used` – Marvin Paulus Sep 10 '20 at 05:58
That's a linter warning, not a runtime error. Just ignore the linter and see if the syntax is recognized. If you have to pass the linter to run the script, then just reference the variable somewhere, it doesn't matter where or how - just find out if spread syntax is supported. – CertainPerformance Sep 10 '20 at 05:59
Ok i tried and show the error SyntaxError: UnexpectedToken at `const obj = {} and const obj2 = { ...obj }` while parsing file – Marvin Paulus Sep 10 '20 at 06:02
See https://stackoverflow.com/q/38490804, it sounds like you're using an old version of Babel. – CertainPerformance Sep 10 '20 at 06:03

score 0 · Answer 3 · answered Sep 10 '20 at 05:41

0

In clearForm(){} function you cannot use messageInfo directly, you should define is a state type not variable.

        clearForm(){
         this.setState({
          messageInfo: {
           ...this.state.messageInfo, 
              subject: '',
              description: ''
           }})
        }

answered Sep 10 '20 at 05:41

Ashish Mishra

412
4
5

i had tried it but still showing SyntaxError: Unexpected Token at `...this.state.messageInfo` – Marvin Paulus Sep 10 '20 at 05:46
your constructor is not close with } please check this – Ashish Mishra Sep 10 '20 at 05:51
It was close correctly, hosently i just trimmed my code, and this `}` is trimmed – Marvin Paulus Sep 10 '20 at 05:56

Object property become undefined after call setState

3 Answers3