0

in my react project, In first file, I have an array which is default exported.

export default [
  {
    paletteName: "Material UI Colors",
    id: "material-ui-colors",
    emoji: "",
    colors: [
      { name: "red", color: "#F44336" },
      { name: "pink", color: "#E91E63" },
      { name: "purple", color: "#9C27B0" },
      { name: "deeppurple", color: "#673AB7" },
      { name: "indigo", color: "#3F51B5" },
      { name: "blue", color: "#2196F3" },
      { name: "lightblue", color: "#03A9F4" },
      { name: "cyan", color: "#00BCD4" },
      { name: "teal", color: "#009688" },
      { name: "green", color: "#4CAF50" },
      { name: "lightgreen", color: "#8BC34A" },
      { name: "lime", color: "#CDDC39" },
      { name: "yellow", color: "#FFEB3B" },
      { name: "amber", color: "#FFC107" },
      { name: "orange", color: "#FF9800" },
      { name: "deeporange", color: "#FF5722" },
      { name: "brown", color: "#795548" },
      { name: "grey", color: "#9E9E9E" },
      { name: "bluegrey", color: "#607D8B" }
    ],

this is only the first element. In second file, I imported the array and copied it like that then I modify newArr and export default newArr

import chroma from 'chroma-js'
import colors from './seedColors'
var obj = [...colors];
var i = -1;
for(let palette of obj){
    var shades = {
        100 :[],
        200 :[],
        300 :[],
        400 :[],
        500 :[],
        600 :[],
        700 :[],
        800 :[],
        900 :[],
    };
    for(let color of palette.colors){
        shades[100].push({name : `${color.name} 100`, color : chroma(color.color).brighten(2).hex()})
        shades[200].push({name : `${color.name} 200`, color : chroma(color.color).brighten(1.5).hex()})
        shades[300].push({name : `${color.name} 300`, color : chroma(color.color).brighten(1).hex()})
        shades[400].push({name : `${color.name} 400`, color : chroma(color.color).brighten(0.5).hex()})
        shades[500].push({name : `${color.name} 500`, color : color.color})
        shades[600].push({name : `${color.name} 600`, color : chroma(color.color).darken(0.5).hex()})
        shades[700].push({name : `${color.name} 700`, color : chroma(color.color).darken(1).hex()})
        shades[800].push({name : `${color.name} 800`, color : chroma(color.color).darken(1.5).hex()})
        shades[900].push({name : `${color.name} 900`, color : chroma(color.color).darken(2).hex()})
    }
    i++;
    obj[i].colors = shades;
}

export default obj

When I import two arrays in another file,I found my original array modified like the second one Why ???????

Abanoub Magdy
  • 15
  • 5
  • What does `seedColors.js` look like? What does the file that uses this code look like? What's in `colors` (does it contain mutable elements)? Give a [mre]. – jonrsharpe Apr 17 '20 at 11:29
  • share full code – mehta-rohan Apr 17 '20 at 11:29
  • Because both `obj[i]` and `colors[i]` refer to one and the same object. `[...colors]` creates a *shallow* copy. Simple example: `var arr1 = [{}]; var arr2 = [...arr1]; arr2[0].hey = 42; console.log(arr1);`. – Felix Kling Apr 17 '20 at 12:12

0 Answers0