CODEWITHSUNDEEP
javascriptreactjs
user3450754
user3450754

Reputation: 115

reactjs onclick display component

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.

Upvotes: 5

Views: 26837

Answers (3)

Mayank Shukla
Mayank Shukla

Reputation: 104369

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/

Upvotes: 8

suyesh
suyesh

Reputation: 659

Try to something like below.

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

    class App extends Component {
      var flag;
      handleClick(e){
       flag = true;
       render() {
        return (
        <Chokers chokers={this.props.items.Chokers}/>
);}
      }
      if(!flag){
      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;

Upvotes: 0

SatyaDash
SatyaDash

Reputation: 190

You are not rendering anything.You just need to return the Chokers component from render function itself.

create some state variable and set that variable to true so that upon this variable check you can render the Chokers component.

Upvotes: 2

Related Questions