title: Change React component visibility based on the state of another component
body: <p>I have created the following React component. It uses an input box to accept a user's answer to a riddle. As soon as the user's input matches the desired answer, the input box become read-only (a bit of a strange way to use them). It also has an "isHidden" prop to determine whether the riddle is rendered.</p>
  
  <pre><code>class Riddle extends React.Component {
    constructor(props) {
      super(props);
      this.answer = props.answer.toUpperCase();
      this.state = {
        text: "",
        isAnswered: false
      };
  
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(event) {
      let userInput = event.target.value.toUpperCase();
      if (userInput == this.answer) {
        this.setState({
          text: userInput,
          isAnswered: true
        });
      } else {
        this.setState({
          text: userInput,
          isAnswered: false
        });
      }
    }
  
    render() {
      if (this.props.isHidden) {
        return &lt;div&gt;&lt;/div&gt;;
      } else {
        return (
          &lt;div&gt;
            &lt;p&gt;{this.props.prompt}&lt;/p&gt;
            &lt;input type="text" value={this.state.text} 
            readOnly={this.state.isAnswered}&gt;&lt;/input&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>Here it is in practice:</p>
  
  <pre><code>function App() {
    return (
      &lt;div&gt;
        &lt;Riddle prompt='The first three letters in the alphabet.' answer="abc" isHidden="false"/&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>What I would like to do is have a bunch of these riddles in sequence, but have riddles only be visible when the previous one was solved. The trouble is that I don't know how to cause the visibility update to happen.</p>
  
  <p>I have read about lifting state from children to a parent component, and I've tried to see if I could create a <code>RiddleSequence</code> component with <code>Riddle</code>s as its children, and have <code>RiddleSequence</code> manage visibility. My problem is that currently it is part of <code>Riddle</code>'s state whether or not it's solved, and I don't know how <code>RiddleSequence</code> can read that information since child state should remain hidden. This seems like a reasonable way to encapsulate <code>Riddle</code>'s functionality, but maybe I'm wrong given my goals.</p>
  
  <p>I have also considered making <code>Riddle</code>s be children of other riddles they depend on, since I can just pass state/props to children:</p>
  
  <pre><code>&lt;Riddle prompt="first riddle"...&gt;
    &lt;Riddle prompt="depends on first riddle"...&gt;
      &lt;Riddle prompt="depends on second riddle"...&gt;
      &lt;/Riddle&gt;
    &lt;/Riddle&gt;
  &lt;/Riddle&gt;
  </code></pre>
  
  <p>But if I have an app with 100 riddles, this seems to get ridiculous. This also reduces flexibility for a more expanded set of features (such as making one riddle depend on a group of 3 riddles).</p>
  
  <p>How can I make the visibility of my <code>Riddle</code> components depend on the state of other riddles?</p>