Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to pass multiple values in react through radio input

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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);
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading