title: React - How to change the text of accordion heading of the current clicked item
body: <p>I am making a simple Reactjs accordion application in which collapse and expanding of each individual items are done.</p>
  <p><strong>Requirement:</strong></p>
  <p>A simple requirement is that I am in the need to toggle the text of the heading as <strong>Expand</strong> or <strong>Shrink</strong> based on the click.</p>
  <p>If we click any of the item then the content will gets displayed in that case the text changes to Shrink as because the accordion gets opened so the Shrink title is given for closing of the accordion.</p>
  <p><strong>Complete working example:</strong></p>
  <blockquote>
  <p><strong><a href="https://codesandbox.io/s/react-accordion-forked-lcyr0" rel="nofollow noreferrer">https://codesandbox.io/s/react-accordion-forked-lcyr0</a></strong></p>
  </blockquote>
  <p>In the above example I have used the following code to change the text,</p>
  <p><strong>Accordion.js</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Text from &quot;./text&quot;;
  import Heading from &quot;./heading&quot;;
  import getAccordion from &quot;./GetAccordion&quot;;
  
  const Accordion = getAccordion(1);
  
  const accordionData = [
    {
      id: 1,
      content: &quot;This is a first content&quot;
    },
    {
      id: 2,
      content: &quot;This is a second content&quot;
    },
    {
      id: 3,
      content: &quot;This is a third content&quot;
    }
  ];
  
  const NormalAccordion = () =&gt; {
    const [toggleValue, setToggleValue] = useState(-1);
  
    const toggleHandler = (index) =&gt; {
      setToggleValue(index);
    };
  
    return (
      &lt;div&gt;
        {accordionData.map((item, index) =&gt; (
          &lt;Accordion&gt;
            &lt;Heading&gt;
              &lt;div
                style={{ padding: &quot;10px&quot;, cursor: &quot;pointer&quot; }}
                className=&quot;heading&quot;
                onClick={() =&gt; toggleHandler(index)}
              &gt;
                {toggleValue !== index ? `Expand` : `Shrink`}
              &lt;/div&gt;
            &lt;/Heading&gt;
            &lt;Text&gt;{item.content}&lt;/Text&gt;
          &lt;/Accordion&gt;
        ))}
      &lt;/div&gt;
    );
  };
  
  export default NormalAccordion;
  </code></pre>
  <p>And this line <code>{toggleValue !== index ? `Expand` : `Shrink`}</code> changes the text once but after that it doesn't make any changes on further toggle over the title(Expand/Shrink).</p>
  <p>Kindly help me to achieve the result of toggling the text between Expand and Shrink based on the respective clicks.</p>