Change values of array using state React Native

Question

Today i tried to change values inside a array using state. So i have a simple array like -

  const [data, setData] = React.useState([
    {
      label: "data 1",
    },
    {
      label: "data 2",
    },
  ]);

Also i dont know is it good idea to use array in state. I created a button and text component also.

<View style={{ justifyContent: "flex-start", top: 50 }}>
  <Button
    title={"test"}
    onPress={() => {
      data[0].label = "fdsfsd";
      setData(data);
    }}
  />
  <Text>{data[0].label}</Text>
</View>

So my idea is when i click button to change data[0].label. But unfortunately it is not change? Why?

Does this answer your question? Why can't I directly modify a component's state, really? — Shivam
– Shivam, Commented Sep 18, 2021 at 10:16

Kartikey · Accepted Answer · 2021-09-18 09:41:37Z

2

Change your onPress to this

onPress={() => {
  let temp = [...data];
  temp[0].label = 'asdasdasdasd';
  setData(temp);
}}

Working Example here

Read More about State Updates, Immutable Approaches etc here - https://www.freecodecamp.org/news/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5/

answered Sep 18, 2021 at 9:41

Kartikey

5,0524 gold badges19 silver badges43 bronze badges

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

Comments

Shivam · Accepted Answer · 2021-09-18 09:51:13Z

0

You can try this, it will work

<View style={{ justifyContent: "flex-start", top: 50 }}>
  <Button
    title={"test"}
    onPress={() => {
      data[0].label = "fdsfsd";
    }}
  />
  <Text>{data[0].label}</Text>
</View>

edited Sep 18, 2021 at 9:51

answered Sep 18, 2021 at 9:45

Shivam

2,3672 gold badges16 silver badges30 bronze badges

2 Comments

Hristo Ivanov Over a year ago

Not working.\1!

Mahmudul Alam Over a year ago

You should not directly mutate your state.

Collectives™ on Stack Overflow

Change values of array using state React Native

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related