CODEWITHSUNDEEP
reactjs
Paresh Jaiswal
Paresh Jaiswal

Reputation: 111

Call the component on button click event

I am new to React.js and I want to call to my component on a button click event.

My requirement is that when I click on the Next button i should call my next component. I have tried using the onClick event and passing the function, which returns the .jsx code. But it is not rendering.

Can anyone help me in this? 

import React, { Component } from "react";
import { Button } from "antd";

class GoNext extends Component {
  render() {

    const nextCategory = () => {
      return <Category2 />;
    };
    const renderNext = () => {
      return (
        <div>
          <Button type="primary" onClick={nextCategory}>
            Next Category
          </Button>
        </div>
      );
    };

    return (
      <div>
        <h4>Successfully Submit!!!</h4>
        {renderNext}
      </div>
    );
  }
}

export default GoNext;

Upvotes: 2

Views: 11526

Answers (3)

Tabish Javed
Tabish Javed

Reputation: 987

Welcome to React!

What you can do is create a boolean in your state for toggling the visibility of the component.

this.state({isNextVisible: false}

and then in the onClick turn visibility to true

onClick = {() => this.setState(isNextVisible: !isNextVisible)}

and then to render

const renderNext = () => {
  const { isNextVisible } = this.state;
  return (
    <div>
      <Button type="primary" onClick={()=> this.setState(isNextVisible: !this.state.isNextVisible)}>
        Next Category
      </Button>
      {isNextVisible && <Category2 />}
    </div>
  );
};

render() {
   return (
      <div>
       <h4>Successfully Submit!!!</h4>
       {renderNext}
      </div>
   );
 }

Returning JSX on click won't work the way you did. Please read 'Composition' and Thinking In React.

Upvotes: 2

Sultan H.
Sultan H.

Reputation: 2938

Consider this:

  • First: to make the button render, we need to invoke the function, and ofcourse add the this. for it to actually locate it in your component:

  • Second: we want to have an attribute in the state, that tells which category to render -if there are more than one in the future-.


import React, { Component } from "react";
import { Button } from "antd";

class GoNext extends Component {
  state = {
    activeCategory: 0
  }

  // Each time the button is clicked will add 1 to the activeCategory
  // when that happens a re-render will occur, if 1 is defined as a case in the switch inside renderCategory, it should render a component...
  handleNextCatClick = () => {
    this.setState(prevState => ({
      activeCategory: prevState.activeCategory + 1
    }));
  }

  renderCategory = () => {
    const { state: { activeCategory } } = this;
    switch(activeCategory){
      case 0: return <Category2 />;
      // Add more cases if you wish such like case 1, case 2 ...etc
      default: return null
    }
  };

  renderNextCatButton = () => {
    return (
      <div>
        <Button type="primary" onClick={handleNextCatClick}>
          Next Category
        </Button>
      </div>
    );
  };

  render() {

    return (
      <div>
        <h4>Successfully Submit!!!</h4>
        {this.renderCategory()}
        {this.renderNextCatButton()}
      </div>
    );
  }
}

export default GoNext;

Upvotes: 2

Jee Mok
Jee Mok

Reputation: 6556

the onclick callback shouldn't return a component;

you can use state to dynamically render the component, something like:

import React, { Component } from "react";
import { Button } from "antd";

class GoNext extends Component {
  state = { show: false }

  handleClick() {
    this.setState({ show: true });
  }

  renderNext = () => (
    <div>
      <Button type="primary" onClick={() => this.handleClick()}>
        Next Category
      </Button>
    </div>
  );

  render() {
    const { show } = this.state;
    return (
      <div>
        <h4>Successfully Submit!!!</h4>
        { this.renderNext() }
        { show && <Category2 /> }
      </div>
    );
  }
}

export default GoNext;

Upvotes: 1

Related Questions