score:4

Accepted answer

you have several mistakes

  1. you should pass onclick to topicslist

    render() {
      return (
        <div classname="row">
          {this.state.istopicclicked
            ? <selectedtopicpage 
                 topicsid={this.state.topicsid} 
                 key={this.state.topicsid} 
                 topicpages={topicpages} />
            : <topicslist onclick={ this.onclick.bind(this) } />}
        </div>
      );
    }
    
  2. remove onclick method from topicslist

     onclick() {
       // ...
     },
    
  3. pass onclick callback from props

    <singletopicbox topicid="1" onclick={this.props.onclick} label="topic"/>
    
  4. add to singletopicbox onclick event

    <div 
       classname="single-topic" 
       data-topic-id={this.props.topicid} 
       onclick={ () => this.props.onclick(this.props.topicid) }
    >
      {this.props.label} {this.props.topicid}
    </div>
    
  5. you don't need call setstate twice

     onclick(topicid) {
       this.setstate({
         istopicclicked: true, 
         topicsid: topicid
       });
     }
    

example


Related Query

More Query from same tag