Question

144

reactjs onclick display component

rated 0 times [ 146] [ 2] / answers: 1 / hits: 26855 / 7 Years ago, fri, february 10, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

masonm

Add To Favorites

Follow

Total Points: 167

Total Questions: 87

Total Answers: 103

Location: Rwanda

Member since Wed, Jun 8, 2022

2 Years ago

masonm questions

1 Exceptional regex for email id validation in JavaScript

Mon, May 3, 21, 00:00, 3 Years ago

1 Bootstrap Carousel - Autoplay video on active slide

Sat, Nov 7, 20, 00:00, 4 Years ago

1 TS2322: Type 'number' is not assignable to type 'bigint

Mon, Oct 12, 20, 00:00, 4 Years ago

1 Vue Router passing props to dynamic routes, unclear documentation

Sun, Aug 9, 20, 00:00, 4 Years ago

1 Async await function not executing within an event listener

Wed, Dec 18, 19, 00:00, 5 Years ago

View All

answered 7 Years ago martina · Accepted Answer

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/