Calling function from button onclick not working react js

react button onclick link
react onclick not working
react native function example
react call function from another component
reactjs trigger onclick
react callback function
react pass function with parameter as prop
react link onclick

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>


            );


     }

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

Multiple onClick Events in React (With Examples), 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  Now inline functions are objects (functions are objects in javascript.) And when react compares functions, it does a strict comparison. The inline function might not have changed in its value, but it is an entirely different function (different reference in memory) and so React detects that there has been a change.

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.

Pass a Parameter Through onClick in React, With JSX you pass a function as the event handler, rather than a string. For example, the HTML: <button onclick="activateLasers()"> Activate Lasers </button​> When using React, you generally don't need to call addEventListener to add This is not React-specific behavior; it is a part of how functions work in JavaScript. Because you are calling that function instead of passing the function to onClick, change that line to this: <button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button> => called Arrow Function, which was introduced in ES6, and will be supported on React 0.13.3 or upper.

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>

There are several ways to make sure functions have access to component console.log('Click happened'); } render() { return <button onClick={this. class Foo extends Component { // Note: this syntax is experimental and not standardized yet. Katz explains what binding is, and how functions work in JavaScript, in detail. In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app. Click on any of the examples below to see code snippets and common uses: Call a Function After Clicking a Button; Call an Inline Function in an onClick Event Handler

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

In class components, the this keyword is not defined by default, so with regular functions the this keyword represents the object that called the method, which can  This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

The onClick event has been around for a long time, and it lets developers call a The <button> JSX element is identical to the <button> HTML element: it draws a React components have a special (if rarely used) method baked in to do just Don't worry if this is confusing: this is a JavaScript problem, not a you problem. For example, <button onClick={this.handleClick}> passes this.handleClick so you want to bind it. However, it is unnecessary to bind the render method or the lifecycle methods: we don’t pass them to other components. This post by Yehuda Katz explains what binding is, and how functions work in JavaScript, in detail.

Learn the ins and outs of React's onClick event handler, including event Synthetic events is a cross-browser wrapper around the browser's native event. whenever the button is clicked on, the showAlert function is called, One way of resolving the problem of binding is to call bind in a render function. // Get the button, and when the user clicks on it, execute myFunction document.getElementById("myBtn").onclick = function() {myFunction()}; /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */

A button has a onClick attribute which receives a function. the onClick is not working, because instead of passing a function, they call the The event is a synthetic event from React which essentially encapsulates the native  If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called. This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

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