reactjs - Hiding and showing text in React -

hey guys stupid, i'm having troubles wrapping ly head around. i'm trying show/hide text inside 1 of components, i'm not able it. i clicked! message know function being passed down. missing? need declare visibility css declaration, maybe that's i'm missing. i'm getting cornfused. :/

thanks in advance:

snippetlist.jsx

import react, { component, proptypes } 'react' import { createcontainer } 'meteor/react-meteor-data'; import snippet './snippet' import { snippets } '../../../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 clicked');     }      rendersnippets() {          return this.props.snippets.map( (snippet) => (             <snippet              key={snippet._id}              title={snippet.title}             content={snippet.content}             onclick={this.togglevisible}             />         ));     }      render() {         const snippets = snippets.find({}).fetch({});          return (             snippets.length > 0              ?             <ul>{this.rendersnippets()}</ul>             :              <p>no snippets @ time</p>         )     }    }  snippetlist.proptypes = {     snippets: proptypes.array.isrequired, }  export default createcontainer(() => {     meteor.subscribe('snippets');      return {         snippets: snippets.find({}).fetch()     }; }, snippetlist); 

snippet.jsx

import react, { component, proptypes } 'react'  export default class snippet extends react.component {      render() {         const visible = this.props.togglevisible         return (             <article>                 <header>                     <h1 classname='snippet-title'>{this.props.title}</h1>                 </header>                 <div classname={visible ? 'show' : 'hidden'} onclick={this.props.onclick}>                     <p classname='snippet-content'>{this.props.content}</p>                 </div>             </article>         )     } }  snippet.proptypes = {     title: proptypes.string.isrequired,     content: proptypes.string.isrequired     // togglevisible: proptypes.func.isrequired } 

the issue aren't passing hide part prop.

in snippet const visible = this.props.togglevisible but... togglevisible isn't passed snippet component undefined

return this.props.snippets.map( (snippet) => (     <snippet      key={snippet._id}      title={snippet.title}     content={snippet.content}     onclick={this.togglevisible}     /> )); 

add togglevisible... aka change this.

return this.props.snippets.map( (snippet) => (     <snippet          key={snippet._id}          title={snippet.title}         content={snippet.content}         togglevisible={this.state.visible}         onclick={this.togglevisible}     /> )); 

you should bind rendersnippets class well... meaning add constructor this.rendersnippets = this.rendersnippets.bind(this);

---

now talk code, why rendering <ul> parent of <article> ? child of ul should <li> refactor components more this.

class snippetlist extends react.component {     constructor(props) {         super(props);         this.state = { visible: false };         this.togglevisible = this.togglevisible.bind(this);         this.rendersnippets = this.rendersnippets.bind(this);     }      togglevisible() {         this.setstate( { visible: !this.state.visible } )         console.log('i clicked');     }      rendersnippets() {         return this.props.snippets.map( (snippet) => (             <snippet                  key={snippet._id}                  title={snippet.title}                 content={snippet.content}                 togglevisible={this.state.visible}                 onclick={this.togglevisible}             />         ));     }      render() {         const snippets = snippets.find({}).fetch({});         return (             snippets.length > 0                ?  <ul>{this.rendersnippets()}</ul>               :  <p>no snippets @ time</p>         )     }    }   export default class snippet extends react.component {     render() {         const {togglevisible: visible} = this.props;         return (             <li>                 <article>                     <header>                         <h1 classname="snippet-title">{this.props.title}</h1>                     </header>                     <div onclick={this.props.onclick}>                         <p classname={visible ? 'show snippet-content' : 'hidden snippet-content'}>{this.props.content}</p>                     </div>                 </article>             </li>         )     } }