title: On child component state change, update siblings
body: <p>Partially working example: <a href="https://codesandbox.io/s/jolly-smoke-ryb2d" rel="nofollow noreferrer">https://codesandbox.io/s/jolly-smoke-ryb2d</a></p>
  
  <p><strong>Problem:</strong>
  When a user expands/opens a component row, all other rows inside the rows parent component need to be collapsed.  Unfortunately, I can't seem to get the other sibling rows to collapse.</p>
  
  <p>I tried passing down a handler from the parent to the child that updates the state of the parent which would then in turn propagate down to the children.   </p>
  
  <p><strong>Expected Result</strong>
  On expand/open of a row, collapse any other rows that are open inside the parent component that isn't the one clicked</p>
  
  <p><strong>Code:</strong></p>
  
  <p>App.tsx</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Rows from "./Rows";
  import Row from "./Row";
  import "./styles.css";
  
  export interface AppProps {}
  
  const App: React.FC&lt;AppProps&gt; = props =&gt; {
    return (
      &lt;Rows&gt;
        &lt;Row&gt;
          &lt;p&gt;Click me&lt;/p&gt;
          &lt;p&gt;Collapse&lt;/p&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;p&gt;Click me&lt;/p&gt;
          &lt;p&gt;Collapse&lt;/p&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;p&gt;Click me&lt;/p&gt;
          &lt;p&gt;Collapse&lt;/p&gt;
        &lt;/Row&gt;
      &lt;/Rows&gt;
    );
  };
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  Rows.tsx
  </code></pre>
  
  <p>Rows.tsx</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import Row, { RowProps } from "./Row";
  
  export interface RowsProps {}
  
  const Rows: React.FC&lt;RowsProps&gt; = props =&gt; {
    const [areRowsHidden, setAreRowsHidden] = useState&lt;boolean&gt;(false);
  
    useEffect(() =&gt; {});
  
    const handleOnShow = (): void =&gt; {};
    const handleOnCollapse = (): void =&gt; {};
  
    const renderChildren = (): React.ReactElement[] =&gt; {
      return React.Children.map(props.children, child =&gt; {
        const props = Object.assign(
          {},
          (child as React.ReactElement&lt;RowsProps&gt;).props,
          {
            onShow: handleOnShow,
            onCollapse: handleOnCollapse,
            isCollapsed: areRowsHidden
          }
        );
        return React.createElement(Row, props);
      });
    };
  
    return &lt;&gt;{renderChildren()}&lt;/&gt;;
  };
  
  export default Rows;
  </code></pre>
  
  <p>Row.tsx</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  
  export interface RowProps {
    onCollapse?: Function;
    onShow?: Function;
    isCollapsed?: boolean;
  }
  
  const Row: React.FC&lt;RowProps&gt; = props =&gt; {
    const [isCollapsed, setIsCollapsed] = useState(props.isCollapsed || true);
  
    useEffect(() =&gt; {}, [props.isCollapsed]);
  
    const handleClick = (): void =&gt; {
      if (isCollapsed) {
        props.onShow();
        setIsCollapsed(false);
      } else {
        props.onCollapse();
        setIsCollapsed(true);
      }
    };
  
    return (
      &lt;&gt;
        {React.cloneElement(props.children[0], {
          onClick: handleClick
        })}
  
        {isCollapsed ? null : React.cloneElement(props.children[1])}
      &lt;/&gt;
    );
  };
  
  export default Row;
  </code></pre>