reactjs onclick display component

Question

Why isn't my component rendering?

import React, { Component } from 'react';
import {Chokers, Bracelets, FRings, MRings} from './AllItems.js'

    class App extends Component {

      handleClick(e){

        <Chokers chokers={this.props.items.Chokers}/>
      }
      render() {
        return (
            <div className="App">
                <ul style={{display: 'inline'}}>
                    <li onClick={this.handleClick.bind(this)}>Chokers</li>
                    <li><a href=""></a><Bracelets bracelets={this.props.items.Bracelets}/>Bracelets</li>
                    <li><FRings frings={this.props.items.FRings}/>Rings for Women</li>
                    <li><MRings mrings={this.props.items.MRings}/>Rings for Men</li>
                </ul>
            </div>
        );
      }
    }

    export default App;

Basically my this.props.items.Chokers for examples call a on my json file that was passed through.

I just want to create a links to another component at an onClick event. The problem that I am having is that my Component under handleClick doesnt render.

Answer 1

If you want to render Chockers component on the click of item, then write it like this, create the state variable and set it true onClick of the item:

class App extends React.Component {
    constructor(){
        super();
        this.state = {render:''}
    }
    handleClick(compName, e){
        console.log(compName);
        this.setState({render:compName});        
    }
    _renderSubComp(){
        switch(this.state.render){
            case 'chockers': return <Chokers/>
            case 'bracelets' : return <Bracelets/>
            case 'rings': return <FRings/>
        }
    }
    render() {
        return (
            <div className="App">
                <ul style={{display: 'inline'}}>
                    <li onClick={this.handleClick.bind(this, 'chockers')}>Chokers</li>
                    <li onClick={this.handleClick.bind(this, 'bracelets')}>Bracelets</li>
                    <li onClick={this.handleClick.bind(this, 'rings')}>Rings for Women</li>
                </ul>
                {this._renderSubComp()}
            </div>
        );
    }
}
class Chokers extends React.Component {
    render(){
        return <div>Inside Chockers</div>
    }
}
class FRings extends React.Component {
    render(){
        return <div>Inside FRings</div>
    }
}
class Bracelets extends React.Component {
    render(){
        return <div>Inside Bracelets</div>
    }
}
ReactDOM.render(<App />, document.getElementById('container'));

Check the jsfiddle for working example: https://jsfiddle.net/ocg4ebdf/