Array aren't copy in react-native

Question

I have two array in different files ! First in the file named maturi.js and it looks like

const BEL2010YEAR12 = [
  {
    question: "",
    hasImage: false,
    isAnswered: false,
    isTextQuestion: true,
    text: "",
    answers: [
      {
        id: "1",
        text: "",
        correct: false,
        userInput: false,
      },
      {
        id: "2",
        text: "",
        correct: false,
        userInput: false,
      },
      {
        id: "3",
        text: "",
        correct: false,
        userInput: false,
      },
      {
        id: "4",
        text: "",
        correct: true,
        userInput: false,
      },
    ],
  },
];

export default {
  BEL2010YEAR12,
};

Second file is my App.js where i called maturi (file above) like

import { BEL12 } from "../maturi";

Then i created another array to copy first which name is BEL2010YEAR12 (from file above) So

const [questions, setQuestions] = useState(BEL12.BEL2010YEAR12);

The problem is when i edit questions array it is affected to the BEL12.BEL2010YEAR12 array. How is this possible. I am confused. Why questions array changed BEL12.BEL2010YEAR12 ? For example if i edit questions like

questions[0].question = "example";
setQuestions(questions);

It will changed array BEL2010YEAR12 . I dont want that ! Why it changed it ?

Mohaimin · Accepted Answer · 2021-08-10 18:34:29Z

2

Use the spread operator to copy the array. If you try to put it directly like you did, it will store the reference, hence effecting the original array. You can read more on value vs reference in js

const [questions, setQuestions] = useState([...BEL12.BEL2010YEAR12]);

For deep clones(deeply nested objects):

const [questions, setQuestions] = useState(JSON.parse(JSON.stringify(BEL12.BEL2010YEAR12)));

edited Aug 10, 2021 at 18:34

answered Aug 8, 2021 at 10:01

Mohaimin

7024 silver badges10 bronze badges

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

Comments

digitalniweb · Accepted Answer · 2021-08-08 10:07:12Z

1

Look for javascript objects and reference. This is how javascript works and you want it to work that way.

If you make an object (or array) and assign this to multiple variables all the variables reference the same object (array).

If you want a copy google "javascript copy object".

Best way to make a copy is in your case JSON.parse(JSON.stringify(yourObject)) (this wouldn't make a copy of functions though)

The spread operator (...) as @Mohaimin suggested isn't a good choice for you in your case, because your nested objects inside BEL2010YEAR12 will be still referencing the original.

answered Aug 8, 2021 at 10:07

digitalniweb

1,1421 gold badge10 silver badges21 bronze badges

5 Comments

Nikola Marinov Over a year ago

Thanks for answer! Can you give example?

digitalniweb Over a year ago

let copyObject = JSON.parse(JSON.stringify(BEL2010YEAR12)); for example. Or let copyQuestions = JSON.parse(JSON.stringify(questions)); after you destructure questions

Nikola Marinov Over a year ago

i do it like const [questions, setQuestions] = useState( JSON.parse(JSON.stringify(BEL12.BEL2010YEAR12)) ); ! Is it good?

Nikola Marinov Over a year ago

ye and it is wotk. Thank you so much !

Mohaimin Over a year ago

Right, the spread operator isn't good for deeply nested objects, this is a better solution!

Collectives™ on Stack Overflow

Array aren't copy in react-native

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related