Hiding and showing text in React
<p>I'm having troubles wrapping my head around this. I'm trying to show/hide text inside one of my components, but I'm not able to do it. I get <code>I was clicked!</code> message so I know the function is being passed down. What am I missing?</p>

<p>Do I also need to declare a <code>visibility</code> CSS declaration, maybe that's what I'm missing?</p>

<p><strong>SnippetList.jsx</strong></p>

<pre><code>import React, { Component, PropTypes } from 'react'
import { createContainer } from 'meteor/react-meteor-data';
import Snippet from './snippet'
import { Snippets } from '../../../api/collections/snippets.js'


class SnippetList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { visible: false }
        this.toggleVisible = this.toggleVisible.bind(this);
    }

    toggleVisible() {
        this.setState( { visible: !this.state.visible } )
        console.log('I was clicked');
    }

    renderSnippets() {

        return this.props.snippets.map( (snippet) =&gt; (
            &lt;Snippet 
            key={snippet._id} 
            title={snippet.title}
            content={snippet.content}
            onClick={this.toggleVisible}
            /&gt;
        ));
    }

    render() {
        const snippets = Snippets.find({}).fetch({});

        return (
            snippets.length &gt; 0 
            ?
            &lt;ul&gt;{this.renderSnippets()}&lt;/ul&gt;
            : 
            &lt;p&gt;No Snippets at this time&lt;/p&gt;
        )
    }   
}

SnippetList.propTypes = {
    snippets: PropTypes.array.isRequired,
}

export default createContainer(() =&gt; {
    Meteor.subscribe('snippets');

    return {
        snippets: Snippets.find({}).fetch()
    };
}, SnippetList);
</code></pre>

<p><strong>Snippet.jsx</strong></p>

<pre><code>import React, { Component, PropTypes } from 'react'

export default class Snippet extends React.Component {

    render() {
        const visible = this.props.toggleVisible
        return (
            &lt;article&gt;
                &lt;header&gt;
                    &lt;h1 className='Snippet-title'&gt;{this.props.title}&lt;/h1&gt;
                &lt;/header&gt;
                &lt;div className={visible ? 'show' : 'hidden'} onClick={this.props.onClick}&gt;
                    &lt;p className='Snippet-content'&gt;{this.props.content}&lt;/p&gt;
                &lt;/div&gt;
            &lt;/article&gt;
        )
    }
}

Snippet.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired
    // toggleVisible: PropTypes.func.isRequired
}
</code></pre>