How to pass a api response value to onclick function

Active3 hr before
Viewed126 times

9 Answers


Stack Overflow Public questions & answers ,Stack Overflow en español, Meta Stack Overflow

Will this work?

<ListGroup.Item onClick={() => this.handleclick(User.userid)}>
load more v

You can create a function that returns a function.,Sometimes passing an additional parameter values or arguments is necessary for you onClick handler.,Hey, here at Linguine Code, we want to teach you everything we know about React. Our only question is, are you in?

You can create a function that returns a function.

class FooBar extends React.Component {
  handleClick = value => () => {

  render() {
    return <button onClick={this.handleClick('Bar')}>Speak</button>;
load more v

 Pretag team - issue, fix, solve, resolve

ExampleComponent is a very simple React component that contains one button and one function.,In order to pass a value as a parameter through the onClick handler we pass in an arrow function which returns a call to the sayHello function.if(typeof __ez_fad_position != 'undefined'){__ez_fad_position('div-gpt-ad-upmostly_com-medrectangle-4-0')};,Notice how in the ExampleComponent code above, we pass in more than just the function name.

import React from 'react';

const ExampleComponent = () => {
  function sayHello(name) {
    alert(`hello, ${name}`);
  return (
    <button onClick={() => sayHello('James')}>Greet</button>

export default ExampleComponent;
load more v

JavaScript | Pass string parameter in onClick function,The task is to pass a string as a parameter on onClick function using javascript, we’re going to discuss few techniques.,Difference between var and let in JavaScript


In this tutorial, we’ll go over the basics of React’s onClick event handler, including event listening, binding methods in class components, and dealing with custom events.,Lastly, we addressed how the onClick event handler works in custom components.,Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React event handlers appear inside curly braces.

 Pretag team - issue, fix, solve, resolve

If you didn’t, here is why may want to. Imagine a scenario where you have a group of three buttons. When you click on one of them, you want to know which one was clicked and perform an appropriate action. You have a choice of creating three onClick event handlers, one for each button, or one hander for all the buttons and pass a parameter identifying the clicked button into it. Which option do you choose? Clearly writing one handler should be less work, right?,If you ever tried to pass a parameter to onClick event handler, you know that it is not straightforward.,However, don’t despair! I will show you how you can pass not even one, but multiple parameters into an onClick event handler. In fact, you can apply the same technique to any React event handler. That approach is both easy to implement and has no performance impact.

// Render a block of three buttons
[1, 2, 3].map(buttonId => (
  // Pass a parameter in 'value' attribute
    button {buttonId}
handleButtonClicked = ev => {
    // Retrieve a passed parameter 'value' attribute
    message: `Button ${ev.currentTarget.value} clicked`
load more v

Pass event handlers and other functions as props to child components:,You can use an arrow function to wrap around an event handler and pass parameters:,If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).

<button onClick={this.handleClick}>
load more v

eventData Type: Anything An object containing data that will be passed to the event handler. ,Returning false from a handler is equivalent to calling both .preventDefault() and .stopPropagation() on the event object.,In jQuery 1.4.3 you can now pass in false in place of an event handler. This will bind an event handler equivalent to: function(){ return false; }. This function can be removed at a later time by calling: .unbind( eventName, false ).

$("#foo").bind("click", function() {
   alert("User clicked on 'foo.'");
load more v

Other "response-value" queries related to "How to pass a api response value to onclick function"