How to pass multiple values in react through radio input-CodePudding

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"  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.

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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"  id="chk" name="check[]" value={creative} onClick={func1} /></td>
                        </tr>
                    )
                }