React useState does not pass in values

Question

I want to pass and set values using React useStates, however it doesn't pass anything.

const initialValue = {
  id: 0,
  name: "",
  type: "",
  time: "",
  location: "",
  material: "", // <- Want to change this separately.
  massPercent: "", // <- Want to change this separately.
}

const [values, setValues] = useState(initialValue); // <- Triggered when textfields have inputs.

const handleInputChange = e => {
  const { name, value } = e.target
  setValues({
     ...values,
     [name]: value
  })
}

let materialElements = {
  material: values.material, // <- changes as i type new values
  massPercent: values.massPercent, // <- changes as i type new values
};
// these values change using a useState [values, setValues]

console.log(materialElements);

const [materialValues, setMaterialValues] = useState(materialElements);

console.log("useState [materialValues]: ", materialValues);

if (values.id === 0) {
   // New Values
   EventStorage.addMaterialData(materialValues);
} else {
   // Existing Values
   EventStorage.updateMaterialData(materialValues);
}

HTML (Not Really Important)

   <Grid container direction="row" spacing={2}>
      <Grid item xs={12} sm={6}>
        <Selection
          name="material"
          label="Material"
          value={values.material}
          onChange={handleInputChange}
        />
      </Grid>
      <Grid item xs={12} sm={6}>
        <InputField
          name="massPercent"
          label="Percent of Mass"
          inputMode={"numeric"}
          pattern="[0-9]*"
          value={values.massPercent}
          onChange={handleInputChange}
        />
      </Grid>
    </Grid>

Picture: When values change, the console log for materialElements shows this.

[![Console Log][1]][1]

But my problem is here. I am trying to pass materialElements as initial values for this useState.

  const [materialValues, setMaterialValues] = useState(materialElements);

  console.log("useState [materialValues]: ", materialValues);

You're concatenating an object to a string and that's how the object gets converted. To console log the actual object just do `console.log("useState [materialValues]: ", materialValues);` — Brian Thompson, Jun 08 '21 at 19:28
Does this answer your question? [JS log object why is showing \[object Object\]](https://stackoverflow.com/questions/47842644/js-log-object-why-is-showing-object-object) — Brian Thompson, Jun 08 '21 at 19:30
I don't think the problem is that the console shows [object Object], but the fact that it passes in nothing. — , Jun 08 '21 at 19:48
It's not clear what you're expecting. Are you saying `materialElements` gets updated somehow but not `materialValues`? If so, please show us how you are attempting to update state. — Brian Thompson, Jun 08 '21 at 19:52
Note that the initial value passed to `useState` is only used on the **first** render. So if your variable `materialElements` after the first render, the state **will not** be updated to reflect that change. — Brian Thompson, Jun 08 '21 at 19:53

score 0 · Answer 1 · answered Jun 08 '21 at 19:39

0

You are converting object to string so that's the result. Try to console.log only variable or replace the period with a comma and it should help.

Something like that:

console.log(materialValues);

or

console.log("useState [materialValues]: ", materialValues);

answered Jun 08 '21 at 19:39

blazej

927
4
11
21

2

This question has already been answered by the linked duplicate in the comments, so it should be marked as a duplicate instead of providing an answer. Please checkout the [help center](https://stackoverflow.com/help/how-to-answer) on answering guidelines. – Brian Thompson Jun 08 '21 at 19:47
I have, but it requires 3 votes in order to be officially closed. – Brian Thompson Jun 08 '21 at 19:51
The problem is not that the console shows [object Object]. My question is that the initial value is not being passed through the useState. – Jun 08 '21 at 19:52
Initial value is being passed to useState value. Could you update the question with full code of component? – blazej Jun 08 '21 at 19:57
@blazej Of course. I've added more lines. – Jun 08 '21 at 20:18
2

As I can see from the code, you pass `initialValue` variable as an initial value to useState. It does work. I don't really understand what are you trying to do with `materialElements`. – blazej Jun 08 '21 at 20:25
I want to set "material" and "massPercent" values separately without changing the rest of the values in initialValue, which is why I am avoiding "setValue". – Jun 08 '21 at 20:33
1

You can't really avoid `setValue` because the component won't be reloaded (and it's the main purpose of `useState`). You have to use `setValue` on edited object. – blazej Jun 08 '21 at 20:41
Thanks. That is what I figured. :) I just made a standalone useState, just for "material" and "massPercent". It just requires more repetitive code... – Jun 08 '21 at 21:12

score 0 · Answer 2 · answered Jun 08 '21 at 20:24

0

i don't know where the problème come from, i have test the same code but i didn't get the save result. this is the code

the result

answered Jun 08 '21 at 20:24

mouafus

148
7

2

Please [don't post images of code](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-errors-when-asking-a-question). – Brian Thompson Jun 08 '21 at 20:33

React useState does not pass in values

2 Answers2