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

You can't render in the onClick, you can only set state and that will help you render in inner html — Alfred Ayi-bonte
– Alfred Ayi-bonte, Commented Oct 23, 2018 at 14:28

Creative Click · Accepted Answer · 2018-10-23 14:24:52Z

2

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

answered Oct 23, 2018 at 14:24

Creative Click

364 bronze badges

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

1 Comment

Alfred Ayi-bonte Over a year ago

You can't render in the onClick, you can only set state and that will help you render in inner html

Akhil Gautam · Accepted Answer · 2018-10-23 14:25:53Z

1

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.

answered Oct 23, 2018 at 14:25

Akhil Gautam

1691 silver badge10 bronze badges

Comments

hossein sedighian · Accepted Answer · 2018-10-23 14:17:42Z

0

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>

answered Oct 23, 2018 at 14:17

hossein sedighian

2,1901 gold badge17 silver badges21 bronze badges

Comments

Flui · Accepted Answer · 2018-10-23 14:40:29Z

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>
    );
  }
}

Collectives™ on Stack Overflow

Calling function from button onclick not working react js

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related