title: How would I toggle object properties to false, whenever one of the properties is set to true in React?
body: <blockquote>
  <p><strong>The Problem:</strong></p>
  </blockquote>
  <ul>
  <li>I am tasked at work to create 3 buttons that are programmed with separate filters that ultimately displays different tickets in the tickets table.</li>
  <li>All the functionality is done, and it displays the filtered tickets.</li>
  <li>HOWEVER, I have one issue that would complete the task and allow me to do a PR.</li>
  <li>Right now, I am using an object inside of a useState hook.</li>
  <li>The object has 3 properties, one for each button, and their initial state is set to false.</li>
  <li>Whenever a button is clicked via an onClick updateButtonObjStateHandler function, the function  SHOULD set that buttons corresponding property to true, and if one of the other properties is already true, it should be set to false.</li>
  <li>So basically only one of the 3 properties should be set to true at any given time, and whenever another button is clicked, that property is now toggled to true, and the others are toggled to false.</li>
  <li>We are very loosely using typescript, and there is an interface on the obj. But it can removed if the solution requires it. I would like to keep it though.</li>
  </ul>
  <blockquote>
  <p><strong>Code Examples</strong></p>
  </blockquote>
  <p><em>The button object:</em> when button is clicked, toggle its related property to true. whenever new button is clicked. set the property related to that newly clicked button to true. and set all others to false.</p>
  <pre><code>// The initial state has all of the properties set to false.
    const [exampleObj, setExampleObj] = useState&lt;IExampleObj&gt;({
      isCanceledBtn: false,
      isExpiredBtn: false,
      isSubmittedBtn: false
    })
  </code></pre>
  <p><em>The button object interface That is being imported from another file</em></p>
  <pre><code>export interface IExampleObj {
      isCanceledBtn: boolean,
      isExpiredBtn: boolean,
      isSubmittedBtn: boolean
  }
  </code></pre>
  <p><em>Expected Outcome</em></p>
  <pre><code>    isCanceledBtn: false,
      isExpiredBtn: true,
      isSubmittedBtn: false
  
      isCanceledBtn: true,
      isExpiredBtn: false,
      isSubmittedBtn: false
  
      isCanceledBtn: false,
      isExpiredBtn: false,
      isSubmittedBtn: true
  </code></pre>
  <blockquote>
  <p><em><strong>What I have tried:</strong></em></p>
  </blockquote>
  <pre><code>// Inside of the onClick function handler
  // I have tried updating the object property for the button that is clicked
  // Here is some psuedocode
     if 'canceled' -&gt;   
          setExampleObj((prevVal: IKpiUpdaterObj) =&gt; ({
          ...prevVal,
          isCanceledBtn: true
        }))
     if 'closed' -&gt;   
          setExampleObj((prevVal: IKpiUpdaterObj) =&gt; ({
          ...prevVal,
          isExpiredBtn: true
        }))
     if 'submitted' -&gt;   
          setExampleObj((prevVal: IKpiUpdaterObj) =&gt; ({
          ...prevVal,
          isSubmittedBtn: true
        }))
  // This code is bad, when I click the button, it updates the related state to true, and it displays those filtered tickets
  // When another button is clicked, it sets the state to true, and displays those filtered tickets.
  // and the same is true for the third button.
  //But then that's it, when I click the buttons furthermore, there is no action because all the buttons are now toggled to true and are never reset to false when another button is clicked
  </code></pre>
  <blockquote>
  <p><strong>MY ULTIMATE GOAL:</strong></p>
  </blockquote>
  <p>to create a function that can toggle object properties from true to false based on which btn is clicked....WITHOUT having to manually write out the object values for each button.</p>
  <p><em><strong>I want to have this.</strong></em></p>
  <p>one object with functionality to toggle from true to false based on the button that was clicked.</p>
  <pre><code>    // values toggle true or false based on which button is clicked button
      // only one can be true, or all can be false
      isCanceledBtn: false,
      isExpiredBtn: true,
      isSubmittedBtn: false
  
  </code></pre>
  <p><em><strong>I am trying to avoid this</strong></em></p>
  <p>manually setting the object values for each button</p>
  <pre><code>    // Button 1
      isCanceledBtn: false,
      isExpiredBtn: true,
      isSubmittedBtn: false
      
      // Button 2
      isCanceledBtn: true,
      isExpiredBtn: false,
      isSubmittedBtn: false
  
      // button 3
      isCanceledBtn: false,
      isExpiredBtn: false,
      isSubmittedBtn: true
  </code></pre>