Javascript objects understand a variable as string instead of a variable

Question

I have two questions about javascript and objects. The first one is:

I have this part of code:

  const handleAnotherStep = () => {
    let procedures = 
      {key:
        {
          stepType: {
            stepCode: {
              language: stepText,
              timeout,
              nextInstruction,
            }
          }
        }
      }
    setProcedures(procedures)
    console.log(procedures)
  }

The key, stepType, stepCode, language, stepText, timeout and nextInstruction are in a useState(). The problem is: the console.log of this is:

[![enter image description here][1]][1]

But it should be like this :

[![enter image description here][2]][2]

You see? Instead of s'tepType', what should be written was the content of the stepType variable. Instead of the 'Key' the content of the key should be there. You get my point? Please, help me, I'm struggling in this and I'm newbie with JS. The nextInstruction and timeout are working just fine. I thin the javascript thinks the key, stepType, stepCode and language are a string, instead of a variable.

"Instead of the 'Key' the content of the key should be there. You get my point?" No, because your point is wrong. A key is a key. There is no variable replacement that occurs there. — rmlan
– rmlan, Commented Jul 28, 2020 at 15:02
key, stepType, stepKey, these are all keys of an object. It's not clear how you want them to be variables. Also, how are you generating the output that you use in your images? — chazsolo
– chazsolo, Commented Jul 28, 2020 at 15:03
The images that are in the right format, I did by hand, on firebase. Now, I want to allow the users to do it. With the variables I'm doing like this case 'ProcedureCode': let k = e.target.value setKey(k) return The user writes it, and I set in a useState() — afr
– afr, Commented Jul 28, 2020 at 15:10
@rmlan The key is a const [key, setKey] = useState(). When the user writes in the input text, I setKey with what he wrote. Let's say, 'DOF001'. What I want the object to have is, instead of the word 'KEY', I want the 'DOF001' wrote there. — afr
– afr, Commented Jul 28, 2020 at 15:12

dreamHatX · Accepted Answer · 2020-07-28 15:32:19Z

2

Use [var] to get the value of a variable as the key and for the value, you can give the variable itself.

  const handleAnotherStep = () => {
    let procedures = 
      {[key]:
        {
          [stepType]: {
            [stepCode]: {
              [language]: stepText,
              timeout,
              nextInstruction,
            }
          }
        }
      }
    setProcedures(procedures)
    console.log(procedures)
  }

And for your second question to add a method to handle adding of steps you need not check because you just want to add an object so I think you can simply give,

  const handleAnotherStep = () => {
    let newProcedures = 
      {[key]:
        {
          [stepType]: {
            [stepCode]: {
              [language]: stepText,
              timeout,
              nextInstruction,
            }
          }
        }
      }
    setProcedures({...prevProcedures, ...newProcedures})
    console.log(procedures)
  }

Note: Also immediately logging the procedure after setting the state will not give the correct value.

edited Jul 28, 2020 at 15:32

answered Jul 28, 2020 at 15:09

dreamHatX

4873 silver badges9 bronze badges

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

1 Comment

afr Over a year ago

Yeah, it worked. Thank you. Now, could you help me with the second question ?

Collectives™ on Stack Overflow

Javascript objects understand a variable as string instead of a variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related