title: How can I get all states of children from parent element?
body: <p>How can I get all states of children from parent element?</p>
  <p>I created a page, and there are a few elements, the most important is this component list.</p>
  <p><strong>Here is the parent element:</strong></p>
  <pre><code>const Home = () =&gt; {
      const walls = [1, 2, 3, 4];
  
      return (
          &lt;Layout&gt;
                  {walls.map(wall =&gt; {
                      return &lt;Wall key={wall} index={wall} /&gt;;
                  })}
          &lt;/Layout&gt;
      );
  };
  </code></pre>
  <p>As you can see, it generates a list of elements with map.</p>
  <p>So, how can I get all children states from parent element?</p>
  <p><strong>This is the child component:</strong></p>
  <pre><code>const Wall = ({ index }: IWall) =&gt; {
      const { doors, windows, handleWindows, handleDoors } = 
      useWall();
  
      return (
          &lt;div&gt;
              &lt;input .../&gt;
              &lt;input .../&gt;
              ...
          &lt;/div&gt;
      );
  };
  </code></pre>
  <p><strong>And it's hooks:</strong></p>
  <pre><code>export const useWall = () =&gt; {
      const [doors, setDoors] = useState(0);
      const [windows, setWindows] = useState(0);
  
      const handleWindows = (value: number) =&gt; {
          if (value &lt; 0 || value &gt; 50) return;
  
          setWindows(value);
      };
  
      const handleDoors = (value: number) =&gt; {
          if (value &lt; 0 || value &gt; 50) return;
  
          setDoors(value);
      };
  
  
      return { doors, windows, handleWindows, handleDoors };
  };
  </code></pre>