How to pass multiple values in react through radio input

Question

I want to pass the value of the whole row of a table to a function when the radio button in the row is selected. This is the table code

<table className="table table-bordered table-stripped">
                <thead>
                    <th>AD Type</th>
                    <th>AD Title</th>
                    <th>Image/Video URL</th>
                    <th>Video Thumbnail</th>
                    <th>Landing URL</th>
                    <th>Placement</th>
                    <th>Country</th>
                    <th>DSP</th>
                    <th>Select</th>
                </thead>
                <tbody>
                    {
                        creative.map(
                            creative =>
                            <tr key = {creative.id}>
                                <td>{creative.ad_type}</td>
                                <td>{creative.ad_title}</td>
                                <td>{creative.image_url}</td>
                                <td>{creative.video_thumbnail}</td>
                                <td>{creative.landing_url}</td>
                                <td>{creative.placement}</td>
                                <td>{creative.country}</td>
                                <td>{creative.dsp}</td> 
                                <td> <input type="radio" class="checkbox1" id="chk" name="check[]" value={creative} onClick={func1} /></td>
                            </tr>
                        )
                    }
                </tbody>
            </table>

And the function func1 simply logs the value

const func1 = (e) => {
    console.log(e.target.value);
}

When I'm using value = {creative}, the logged output is [object Object]. I even tried using value = {creative.ad_type, creative.ad_title} but then it only logs the last value, in this case, creative.ad_title. I want to log all the values of the creative object.

Mina · Accepted Answer · 2022-06-24 13:19:59Z

1

You can use JSON.stringify() to turn the object value to JSON format.

ex:

value{ JSON.stringify(creative) }

And then you try to get the value you need to parse it with JSON.parse()

const func1 = (e) => {
  console.log(JSON.parse(e.target.value);
}

answered Jun 24, 2022 at 13:19

Mina

17.8k3 gold badges24 silver badges39 bronze badges

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

4 Comments

Shlok Sharma Over a year ago

Thank you for the answer, it worked. I need 1 more help, so in the function I don't want creative.id parameter, is there anyway to ignore that and get the rest 8 parameters?

Milos Pavlovic Over a year ago

You can create helper function const removeKey = (key, { [key]: _, ...rest }) => rest; and use it as removeKey('id', creative). Otherwise you would need to explicitly set property by property in a new object.

Mina Over a year ago

You are welcome, To do that you need to set the value of the object yourself. value{ JSON.stringify({ ad_type: creative.ad_type, ad_title: creative.ad_title, image_url: creative.image_url, video_thumbnail: creative.video_thumbnail, landing_url: creative.landing_url, placement: creative.placement, country: creative.country, dsp: creative.dsp }) }

Mina Over a year ago

Or as @Milos suggests to do a helper method to help you if you want repeatedly do that in other places in your code.

Mirza Umair · Accepted Answer · 2022-06-24 13:41:00Z

1

You have to pass the number/string as the value of the input field. you cannot directly pass an object as the value. so you have to convert the object to a string with JSON.stringify(creative) which converts your object into a string. then after onChange, you will get the value and parse this value.

another solution that I suggest to you:

you already have the creative data. just pass creative.id as the value and onChange find that element from the creative array with the event.target.value which will be your id.

edited Jun 24, 2022 at 13:41

answered Jun 24, 2022 at 13:31

Mirza Umair

3892 silver badges16 bronze badges

Comments

Andyally · Accepted Answer · 2022-06-24 13:37:22Z

0

You can create your custom readio input component

const RadioInput = ({ value, onClick }) => {
  return <input type="radio" value="" onClick={() => onClick(value)} />;
};

Use it. You also can pass other radio input properties to your custom component and attach them to your input.

<RadioInput
  onClick={func1}
  value={creative}
/>

answered Jun 24, 2022 at 13:37

Andyally

1,1272 gold badges13 silver badges29 bronze badges

Comments

kaddour · Accepted Answer · 2022-06-24 13:38:27Z

0

you can try this

  {
                    creatives.map(
                        creative =>
                        <tr key = {creative.id}>
                            <td>{creative.ad_type}</td>
                            <td>{creative.ad_title}</td>
                            <td>{creative.image_url}</td>
                            <td>{creative.video_thumbnail}</td>
                            <td>{creative.landing_url}</td>
                            <td>{creative.placement}</td>
                            <td>{creative.country}</td>
                            <td>{creative.dsp}</td> 
                            <td> <input type="radio" class="checkbox1" id="chk" name="check[]" value={creative} onClick={func1} /></td>
                        </tr>
                    )
                }

answered Jun 24, 2022 at 13:38

kaddour

11 bronze badge

1 Comment

Ethan Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to pass multiple values in react through radio input

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related