ReactJS: How to pass function paramater dynamically

Question

How to call Functions with parameter dynamically in ReactJS when selected a field

While selecting the element from the select drop-down, I stored that value in the state variables

<Select
onChange={e => setMessage(e.value)}
options={options}
>

After that, I need to call another function which this parameter and I did this, but it doesn't take any argument

<CallGetAMIDetails />

What will be the right syntax to execute the function with parameter

function CallGetAMIDetails(message)

This is wrong syntax <CallGetAMIDetails(message) />

Here is the full example code, what would be right thing to do to call this function function CallGetAMIDetails(message)

import React , { useState }from 'react';
import {DashboardLayout} from '../components/Layout';
import Select from 'react-select'

const options = [
    { value: 'ami-abc*', label: 'ami-abc' },
    { value: 'ami-xyz*', label: 'ami-xyz' },
]

const DiscoverAMIPage = () => {
    return (
        <DashboardLayout>
            <h2>Discovered AMI</h2>
            <Select
            onChange={e => setMessage(e.value)}
            options={options}
             />
        <CallGetAMIDetails />
        </DashboardLayout>
    )
}

  function CallGetAMIDetails(message) {
    console.log(this.message)
 }

export default DiscoverAMIPage;

David · Accepted Answer · 2021-08-16 11:33:15Z

1

CallGetAMIDetails isn't a component, it's just a normal function. You'd call it like any other function. (Like how you call setMessage or console.log functions already.) For example:

CallGetAMIDetails(someValue)

Are you trying to call it in the onChange handler? If so, it would be like this:

onChange={e => {
  setMessage(e.value);
  CallGetAMIDetails(someValue);
}}

Basically you'd just wrap the change handler's function in curly braces {} so you could add another line of code to it.

Note of course that someValue is just a placeholder here, since I don't know what you want to actually pass to it. If you're manually creating the function argument then it could be something like:

CallGetAMIDetails({ message: 'some message' });

answered Aug 16, 2021 at 11:33

David

221k42 gold badges247 silver badges338 bronze badges

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

Comments

Dupeyrat Kevin · Accepted Answer · 2021-08-16 11:35:35Z

1

You can try to pass your message state under CallGetAMIDetails components like this

<CallGetAMIDetails callMessage={message} />

And after use it in the component as props :

    CallGetAMIDetails = ({callMessage}) => {
       // Do somethings
    }

Every time your state is update with setMessage() useState function, your message state is updated and so your CallGetAMIDetails component too

answered Aug 16, 2021 at 11:35

Dupeyrat Kevin

1064 bronze badges

Collectives™ on Stack Overflow

ReactJS: How to pass function paramater dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related