How to handle when a radio button is clicked?

Question

I want a function to be called when a radio button is clicked. In this function there will be a two-dimensional array in the following format:

[[0,0],[1,0],[2,1],[3,0],[4,1]]

An array entry will look like: [regionNumber, 0 or 1 ]

regionNumber corresponding to a region number starting at 0
0 being the corresponding radio button has not been clicked.
1 being the corresponding radio button has been clicked.

I will pass this two-dimensional array into another component to use.

When a radio button is clicked, it will be identified in the two-dimensional array and the corresponding 0/1 will be switched to the opposite value.

For example:

// this means `regionNumber` 2 and `regionNumber` 4 radio buttons are checked.
[ [0,0], [1,0], [2,1], [3,0], [4,1] ]

// if we click the radio button 4 again (`regionNumber` 4) then it will turn into:    
[ [0,0] , [1,0] , [2,1] , [3,0] , [4,0] ]

When radio buttons are checked, send that object of the array into Graph. For example, when [object1,object2,object3] = object1 and object2 are checked therefore they will complete this.

import React from 'react';
import { MDBFormInline } from 'mdbreact';
import { MDBBtn } from "mdbreact";
import { Container } from 'reactstrap';
import $ from "jquery";

const Test = props => {
  const total_regions = (JSON.parse(JSON.stringify(props.test)).length); // gets the number of regions

  return (
    // displays radio buttons depending on the number of objects in json

    <div>
    {props.test.map((item, idx) => { 
      return (
        <label key={idx}>
          <input className="region" type="radio" value={idx} />
          <span>{idx}</span> 
        </label>
      );
    })}
    </div>

  );
};
export default Test;

I was thinking of doing a jQuery but because ill be handling an array within the function I was unsure if jQuery could do this as I also will call another component within the function.

I've tried having onClick in the radio button but I think I am not using it correctly.

Does anybody have any guidance thanks in advance?

this might become a problem as you would have to lookup a lot of times. why don't you try an object type approach? { "0": 1, "1":0 } ? Updating data and parsing should be easier with this — Prikesh Savla, Apr 10 '20 at 17:27
and for the event, you should use onchange event instead of onclick — Prikesh Savla, Apr 10 '20 at 17:30

score 1 · Accepted Answer · answered Apr 10 '20 at 17:42

Just use onClick. Here is an example you should be able to adapt.

const Test = props => {
  const total_regions = JSON.parse(JSON.stringify(props.test)).length; // gets the number of regions
  const handleClick = (item, idx) => {
    console.log(`item ${item} with index ${idx} clicked`);
  };

  return (
    // displays radio buttons depending on the number of objects in json

    <div>
      {props.test.map((item, idx) => {
        return (
          <label key={idx}>
            <input
              className="region"
              type="radio"
              value={idx}
              onClick={() => handleClick(item, idx)}
            />
            <span>{idx}</span>
          </label>
        );
      })}
    </div>
  );
};

How to handle when a radio button is clicked?

1 Answers1