title: How to use props or state to render or not render 1 out of these 5 forms on click?
body: <p>I'm looking for advice on how to render one out of five forms in React on the click on one of their five related buttons. I've got it working actually for one form, but I'm pretty sure this is not how things should be done in React.</p>
  
  <p>There is a sidebar with 5 buttons and a content area that displays some content. One of the forms should appear in the content area after a click on their respective buttons in the sidebar. Only one form should be displayed at a time. Both the sidebar and the content area are functions inside of a class called GraphArea that renders them.</p>
  
  <p>AddNodes (one of five buttons in the sidebar):</p>
  
  <pre><code>const AddNodes = ({ showAdd }) =&gt; (
      &lt;li role="presentation" className="list-inline"&gt;
          &lt;a href="" className="nav-link" onClick={showAdd}&gt;
              &lt;i className="fa fa-plus" aria-hidden="true"/&gt; Add
          &lt;/a&gt;
      &lt;/li&gt;
  );
  export default AddNodes;
  </code></pre>
  
  <p>The problem is, there are five forms and buttons... There's no way one could reasonably continue like this.</p>
  
  <p>I'm using Apollo link state. All 5 five forms won't be rendered by default, so they've got a default value of false. The values are written to the cache. Apollo queries and mutates a default value in the cache to true on click.</p>
  
  <p>It would mean a lot to me if you could show me the right way here. I'm missing that 'click' of how things work in React and this would be a great oppertunity for it. This is the sidebar's and content area's parent full component:</p>
  
  <p>GraphArea: (parent)</p>
  
  <pre><code>class GraphArea extends Component {
  
      render() {
  
          const { updateEditGraph, editGraph: { mode } } = this.props;
  
          const showAdd = (e) =&gt; {
              updateEditGraph(
                  {
                      variables: {
                          index: 'mode',
                          value: 'addNode'
                      }
                  });
              e.preventDefault()
          };
  
          const showLink = (e) =&gt; {
              updateEditGraph(
                  {
                      variables: {
                          index: 'mode',
                          value: 'addLink'
                      }
                  });
              e.preventDefault()
          };
  
          return (
              &lt;div className="item"&gt;
                  &lt;GraphSidebar showAdd={showAdd} showLink={showLink}/&gt;
                  &lt;GraphContent/&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default compose(
      graphql(updateEditGraph, {name: 'updateEditGraph'}),
      graphql(getEditGraph, {
          props: ({data: {editGraph}}) =&gt; ({
              editGraph
          })
      })
  )(GraphArea);
  </code></pre>
  
  <p>GraphContent:</p>
  
  <pre><code>class GraphContent extends Component {
  
      render() {
  
          let content;
  
          if (this.props.editGraph.mode === 'addNode') {
              content = &lt;AddNodesForm/&gt;
          } else if (this.props.editGraph.mode === 'addLink') {
              content = &lt;LinkNodesForm/&gt;
          } else {
              content = null;
          }
  
          return (
              &lt;div className="content"&gt;
                  {content}
                  &lt;Graph/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default compose(
      graphql(getEditGraph, {
          props: ({data: {editGraph}}) =&gt; ({
              editGraph
          })
      })
  )(GraphContent);
  </code></pre>
  
  <p>GraphSidebar:</p>
  
  <pre><code>const GraphSidebar = ({ showAdd, showLink }) =&gt; (
              &lt;div className="avatars"&gt;
                  &lt;ul&gt;
                      &lt;AddNodes showAdd={showAdd} /&gt;
                      &lt;SequenceNodes /&gt;
                      &lt;EditNodes /&gt;
                      &lt;LinkNodes showLink={showLink} /&gt;
                      &lt;DeleteNodes /&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
  </code></pre>