title: Manipulating state of multiple child components
body: <p>I'm not sure whether or not it is best to keep state within the individual child component or the parent.</p>
  
  <p>I have a parent component which will hold a child component which needs to be able to be duplicated on demand.</p>
  
  <p>I have a few questions:</p>
  
  <ul>
  <li><p>Where do i store the state for the individual component is it in the component itself or is it in the parent?</p></li>
  <li><p>If it is in the child component how do I tell the parent to update the other children.</p></li>
  <li><p>If it's in the parent how do I pass a function to the child which will update ITS state and not the parents state?</p></li>
  <li><p>How do I access each of the components state and tell it to change based on another child state changing?</p></li>
  </ul>
  
  <p>Currently I'm pushing a new "card" Component into an array which keeps track of all the Components I need to render on the "board".</p>
  
  <p>I can't conceptualise the best way to manage the state of everything and how to access each child. Do they have an individual ID? how can I change all their states.</p>
  
  <ul>
  <li>--------------------- BOARD -----------------------          *</li>
  </ul>
  
  <pre><code>    import React from "react";
      import Card from "./Card";
  
      export default class Board extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            cards: [&lt;Card /&gt;]
          };
        }
  
        componentDidMount() {}
  
        createCard() {
          this.state.cards.push(&lt;Card /&gt;);
          this.forceUpdate();
        }
  
        render() {
          return (
            &lt;div id="Board"&gt;
              &lt;button onClick={() =&gt; this.createCard()}&gt;Create Card&lt;/button&gt;
              {this.state.cards.map(card =&gt; (
                &lt;Card /&gt;
              ))}
            &lt;/div&gt;
          );
        }
      }
  </code></pre>
  
  <ul>
  <li>-------------------------- CARD ------------------------------   *</li>
  </ul>
  
  <pre><code> export default class Card extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         active: false
       };
     }
  
     cardClick = () =&gt; {
       this.setState({
         active: !this.state.active
       });
     };
  
     render(cardClick) {
       return (
         &lt;div&gt;
           {this.state.active ? (
             &lt;div
               className="activeCard"
               id="card"
               onClick={() =&gt; this.cardClick()}
             &gt;
               Active
             &lt;/div&gt;
           ) : (
             &lt;div
               className="inactiveCard"
               id="card"
               onClick={() =&gt; this.cardClick()}
             &gt;
               Inactive
             &lt;/div&gt;
           )}
         &lt;/div&gt;
       );
     }
   } ```
  
  
  
  </code></pre>