Showing a react component on click

Question

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.

What exactly is it saying is undefined? Can you post the error message? — joshuakcockrell
– joshuakcockrell, Commented Jun 14, 2018 at 17:51
You have to bind ycClick() to the correct this. For example in ctor: this.ycClick = this.ycClick.bind(this); — Adriano Repetti
– Adriano Repetti, Commented Jun 14, 2018 at 17:52

user9906968 · Accepted Answer · 2018-06-14 17:53:13Z

7

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

answered Jun 14, 2018 at 17:53

user9906968

Sign up to request clarification or add additional context in comments.

1 Comment

charles Over a year ago

Hi, I tried running this and I got "TypeError: this.state is not a function" on the ycClick function.

Shubham · Accepted Answer · 2018-06-14 18:08:54Z

1

Update your handler with this

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


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

answered Jun 14, 2018 at 18:08

Shubham

73812 silver badges34 bronze badges

Collectives™ on Stack Overflow

Showing a react component on click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related