Calling function from button onclick not working react js

Question

Im new to javascript and trying to figure this out. I am trying to have the div structure in renderNewCard() appear on the page everytime you click the button. The button seems to work when i call a function with just an alert message, but it does nothing when i call this method and try to output the div structure. I attached a picture of what the div structure looks like and what should be added when clicking the button. In the render, don't worry about the lander and authentication methods for those work fine. Im having issues with the button producing the output i want from calling the function with the div structure. I might be missing something, but not entirely sure. Any help/advice is appreciated.

 .Home .newObjects { height: 130px; padding-top: 81px; } .Home .newObjects button { border-width: 2px; border-color: rgb(98, 98, 98); border-style: solid; border-radius: 6px; background: rgb(255, 255, 255); box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.18); width: 72px; height: 100%; margin-left: 72%; font-weight: bold; } .Home .newObjects button:focus { outline: none; } .card { min-height: 310px; } .scroll-box { overflow-y: scroll; height: 310px; padding: 1rem; } .card-border{ border-style: solid; border-width: 2px; margin-top: 50px; box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.18); } 

 import React, {Component} from "react"; import "./Home.css"; import {ControlLabel, FormControl, FormGroup} from "react-bootstrap"; export default class Home extends Component { renderNewObjectsButton() { return ( <div className="newObjects"> <button onClick={()=>this.renderNewCard()}>New</button> </div> ) } render() { return ( <div className="Home"> {this.props.isAuthenticated ? [this.renderNewObjectsButton()] : this.renderLander() } </div> ); } renderNewCard(){ return( <div className="row" id="container"> <div className="card-border" > <div className="card"> <div className="card-body"> <a href="#" className="btn-customer">Customer</a> </div> <div className="card-body"> <a href="#" className="btn-vehicle">Vehicle</a> </div> <div className="card-body"> <a href="#" className="btn-transaction">Transaction</a> </div> </div> </div> </div> ); } } 

enter image description here

Answer 1

 <button onClick={() => { this.setState({ show: true })}}>{this.state.show &&this.renderNewCard()}</button>

Answer 2

Go through this https://medium.com/@johnwolfe820/rendering-components-in-onclick-events-in-react-bc0d7b54e1cd link. It is just setting the value to rendered on the basis of conditions. Hope it will serve your purpose.

Answer 3

call your home object inside button onclick

you have somthing like

export var home = new Home()

so use this like

<button onClick={()=>home.renderNewCard()}>New</button>

Answer 4

Each react component has one render method and will only render what is returned by that method. And the way to influence the render method is by changing the props or the state of the component.

What you need is a variable stored in the state of the component like:

 import React, {Component} from "react"; import "./Home.css"; import {ControlLabel, FormControl, FormGroup} from "react-bootstrap"; export default class NewObjectsButton extends Component { render() { return ( <div className="newObjects"> <button onClick={this.props.renderNewCard}>New</button> </div> ) } } export default class NewCard extends Component { render() { return( <div className="row" id="container"> <div className="card-border" > <div className="card"> <div className="card-body"> <a href="#" className="btn-customer">Customer</a> </div> <div className="card-body"> <a href="#" className="btn-vehicle">Vehicle</a> </div> <div className="card-body"> <a href="#" className="btn-transaction">Transaction</a> </div> </div> </div> </div> ); } } export default class Home extends Component { state = { shouldRenderNewCard: false, }; renderNewCard() { this.setState({ shouldRenderNewCard: true }); }; render() { return ( <div className="Home"> {this.props.isAuthenticated ? <NewObjectsButton renderNewCard={this.renderNewCard} /> : this.renderLander() } {this.state.shouldRenderNewCard ? <NewCard /> : null} </div> ); } }