title: How to change the value of all the objects inside the expect except the one which is clicked in React js?
body: <p>I am mapping the objects of an array and making them tabs, and what I want to achieve is when one tab is clicked, it should change the property of that tab and all other tabs.</p>
  <p>Here is the sandbox example: <a href="https://vnlrf.csb.app/" rel="nofollow noreferrer">https://vnlrf.csb.app/</a></p>
  <pre><code>import &quot;./styles.css&quot;;
  import React, { useState } from &quot;react&quot;;
  
  export default function App() {
    const attributeValue = [
      { theValue: &quot;theValue 1&quot;, selected: &quot;false&quot; },
      { theValue: &quot;theValue 2&quot;, selected: &quot;false&quot; },
      { theValue: &quot;theValue 3&quot;, selected: &quot;false&quot; },
      { theValue: &quot;theValue 4&quot;, selected: &quot;false&quot; },
      { theValue: &quot;theValue 5&quot;, selected: &quot;false&quot; }
    ];
    return (
      &lt;div&gt;
        {attributeValue.map((obj, index) =&gt; {
          return (
            &lt;TestingTabs
              theValue={obj.theValue}
              theIndex={index}
              theSelected={obj.selected}
              entireArray={attributeValue}
            &gt;&lt;/TestingTabs&gt;
          );
        })}
      &lt;/div&gt;
    );
    function TestingTabs({ theValue, theSelected, theIndex, entireArray }) {
      const [theSelectedValue, setTheSelectedValue] = useState(theSelected);
  
      const changeOtherToFalse = () =&gt; {
        entireArray.map((obj, index) =&gt; {
          if (index === theIndex) {
          } else {
            obj.selected = false;
          }
        });
      };
      return (
        &lt;div
          className={`customer__account__tabs ${
            theSelectedValue === &quot;true&quot; &amp;&amp; &quot;active_btn&quot;
          }`}
          onClick={() =&gt; {
            if (theSelectedValue === &quot;true&quot;) {
            } else {
              setTheSelectedValue(&quot;true&quot;);
              changeOtherToFalse();
            }
          }}
        &gt;
          &lt;div className=&quot;customer__account__tabs__title&quot;&gt;{theValue}&lt;/div&gt;
  
          &lt;div&gt;{theSelectedValue}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  <p>here suppose when the first tab will be clicked, the selected value of that should be true and all <br> the other tabs should be false, but that does not happen. What happens is when one tab is<br> clicked it becomes true and it does not make another tabs false
  <a href="https://i.stack.imgur.com/lBMbv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lBMbv.png" alt="" /></a></p>
  <p><a href="https://i.stack.imgur.com/QXfLt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QXfLt.png" alt="" /></a></p>