title: How to pass data from child component to parent component without the child component rerendering in React?
body: <p>My child component is an accordion with controls in it. The problem is, everytime you input data on the controls and it triggers an onChange event which passes its data to its parent component, the accordion closes/collapses and I don't need that behavior.</p>
  <p>The accordion is just imported from a library and I can't change its behavior.</p>
  <p>Is there anyway to prevent this or pass props/data from child component to parent component without rerendering/restarting DOM of child component?</p>
  <p>Parent component:</p>
  <pre><code>  const ParentComponent = () =&gt; {
  
    const handleChangeChildAccordion = (e) =&gt; {
      console.log(e);
    }
  
    return (
      &lt;ChildComponentAccordion currentData={currentData} onChangeTPAccordion={handleChangeChildAccordion}/&gt; }
    );
  }
  </code></pre>
  <p>Child Component:</p>
  <pre><code>const ChildComponent = (props) =&gt; {
  
    const onDataChangeHandler = (e) =&gt; {
         props.onChangeTPAccordion(e);
      };
  
      return (
        &lt;Accordion onChange={onDataChangeHandler}/&gt;
      );
  }
  </code></pre>