How to pass multiple values in react through radio input

user_11640299 0
Viewed 152

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.

reactjs radio-button javascript
4 Answers

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

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.

user_121017950

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}
/>
user_91864260

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>
                    )
                }
user_118801900
Related