CODEWITHSUNDEEP
javascriptreactjs
charles
charles

Reputation: 119

Showing a react component on click

I tried googling this and searching on stack overflow, but none of these really seemed to help with my solution. I am trying to set up two buttons. When each one is clicked I want it to render its respective component. Here is what I am currently doing to change the state.

import React, { Component } from 'react';
import Structured from '../Structured/Structured';
import YC from '../YC/YC';

class Home extends Component {
constructor() {
  super();
  this.state = {
    YC: false,
    Structured: false
  }
}

ycClick() {
    this.setState({
      YC: true,
      Structured: false
    });
  }


structuredClick() {
    this.setState({
      Structured: true,
      YC: false
    });
  }


render() {
  const { isSignedIn, route } = this.state;
  return (
    <div>
    <h1>Rick's Notes</h1>
    <div class="ph3">
        <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href="#0" onClick={this.ycClick}>YC vs. Non. YC</a>
        {this.state.YC ? <YC /> : null}
        <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href="#0" onClick={this.structuredClick}>Structured Note Descriptions</a>
        {this.state.Structured ? <Structured /> : null}
    </div>
    </div>
  );
}
}

export default Home;

I am trying to make it so that on click YC (or structured) is set to true and if this.state.yc is true it returns the component. However, it says that this is undefined so their must be an issue with the way I am calling the component. Thanks for any help. Let me know if there's anything else I should specify.

Upvotes: 2

Views: 110

Answers (2)

Shubham
Shubham

Reputation: 738

Update your handler with this

ycClick = () => {
    this.setState({
      YC: true,
      Structured: false
    });
  }


structuredClick = () => {
    this.setState({
      Structured: true,
      YC: false
    });
  }

Upvotes: 1

user9906968
user9906968

Reputation:

Use this.ycClick.bind(this) instead of this.ycClick (same with this.structuredClick)

Upvotes: 7

Related Questions