title: React having onClick work only once on a component
body: <p>Hello I am trying to build a forum site. I have simple categories and comments. I have a button that displays a text box to enter a comment on a category, but when I click the button it opens text boxes on every category. I just want one text box. Here is the code I have so far. Any help would be appreciated. Thanks</p>
  
  <pre><code>state = { showing: true };
  
  renderLists(categories) {
    const { showing } = this.state;
  
    if (categories == null) return &lt;div /&gt;;
    return (
      &lt;ul className="ul"&gt;
        {categories.map(category =&gt; {
          return (
            &lt;li id={category._id} className="categories" key={category._id}&gt;
              {category.name}
  
              &lt;Posts categ={category._id} /&gt;
              &lt;button
                className="label"
                onClick={() =&gt; this.setState({ showing: !showing })}
              &gt;
                Add Comment
              &lt;/button&gt;
              {showing ? (
                &lt;div&gt;
                  &lt;form method="post" action="/post/create-posts"&gt;
                    &lt;input type="text" name="body" /&gt;
  
                    &lt;input type="hidden" name="cat" value={category._id} /&gt;
                    &lt;input type="submit" value="Submit" /&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
              ) : null}
            &lt;/li&gt;
          );
        })}
      &lt;/ul&gt;
    );
  }
  
  render() {
    return (
      &lt;div&gt;
        &lt;main className="categories"&gt;
          {this.renderLists(this.state.category)}
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>