How to concat the object is useState array?

Question

I have the useState varible. I want to concat the value with new object.

const [dates,setDates] = useState(["Mon","Sun"])

rules: 1.If the date exist with isSelected flag then make as false

[{day:"mon",isSelected:false}]

otherwise, make as,

[{day:"mon",isSelected:true}]

my function below,

const handleDay = (day) => {
  setDates((x) => {
    x.map((v) => {
      if (day === v.day && v.isSelected) {
        v.isSelected = true;
        return {
          v,
        };
      } else {
        return {
          day,
          isSelected: true,
        };
      }
    });
  });
};

handleDay('mon');

expected output

[{day:"mon",isSelected:true}, 'Sun']

but I got this,

 [{
    "day": "Mon",
    "isSelected": true
 }, {
    "day": "Mon",
    "isSelected": true
 }]

so `["Mon","Sun"]` will become eg `[{day:"mon",isSelected:false}]` or `[{day:"mon",isSelected:false}, 'Sun']`? — Apostolos, Jul 05 '21 at 10:22

Apostolos · Accepted Answer · 2021-07-05T10:36:51.950

Replace your map code with this

arr.map(v => {
  if (day === v.day || day === v) {
    return {
      day: v.day ? v.day : v,
      isSelected: !v.isSelected
    };
  } else {
    return v
  }
});

let arr = ["Mon", "Sun"]

const handleDay = day => {
  let arr2 =  
    arr.map(v => {
      if (day === v.day || day === v) {
        return {
          day: v.day ? v.day : v,
          isSelected: !v.isSelected
        };
      } else {
        return v
      }
    });
    
    return arr2;
};

console.log(handleDay('Mon'));
arr = handleDay('Mon');
console.log(handleDay('Mon'));

score 0 · Answer 2 · answered Jul 05 '21 at 10:30

As far as I understan your requirements, handleDayshould look like this:

const handleDay = (day) => {
  setDates((x) => {
    return x.map((v) => {
      if (day === v.day && v.isSelected) {
        v.isSelected = false;
        return {
          v,
        };
      } else {
        return day
      }
    });
  });
};

score 0 · Answer 3 · answered Jul 05 '21 at 10:48

piotrruss had it almost correct.

const handleDay = (day) => {
  setDates((x) => {
    return x.map((v) => {
      if (day === v || day === v.day) {
        return {
          day,
          isSelected: !v.isSelected,
        };
      } else {
        return v;
      }
    });
  });
};

score 0 · Answer 4 · answered Jul 05 '21 at 10:53

You can concat your object with spread operator also.

const handleDay = (day) => {
setDates((x) => {
    return x.map((v) => {
      if (day === v.day && v.isSelected) {
        v.isSelected = false;
        return {
          v,
        };
      } else {
        return day
      }
    });
  });
};

How to concat the object is useState array?

4 Answers4