title: React.js, How to change one property of a object inside of map while keeping other property same?
body: <p>I have an array of objects. Each object has two properties: value, faceup. The array is used as a state. I want to change the faceup property without effecting the value property. But, the code I wrote (handleclick) overwrites the value property of card object too. How to prevent this happen?</p>
  <pre><code>const Board = (props) =&gt;{
   const [cards, setCards]= useState(createCards(props.cardnums));
   const handleclick = ()=&gt;{
     setCards((preCards)=&gt;preCards.map((card)=&gt; ( card.value===1? card.faceup=true : card.faceup=false) ))
   }
  function createCards(nums){ 
       var cardlist=[];
       for (var i=0; i&lt;nums.length; i++) {
            var card = {value:nums[i], faceup:false };
            cardlist.push(card)
       }
       return cardlist
     }
  
   return(
     &lt;div&gt;   board {JSON.stringify(cards)} 
     &lt;button onClick = {handleclick}&gt;test&lt;/button&gt;
     &lt;div className= &quot;gridContainer&quot;&gt;
        {cards.map((card)=&gt; (&lt;div className=&quot;gridItem&quot;&gt; {card.value}&lt;/div&gt;) )}
     &lt;/div&gt;
     &lt;/div&gt;
   )
  }  
  </code></pre>