How do you assign the value of a table row to a checkbox in React?

I'm a fairly new developer so my apologies if this is a simple question. I've been googling for an entire day and have yet to find an answer so I figured I'd come the hive mind of stackOverflow :). I'm trying to migrate an Angular app to a React app and I can't figure out how to interpret the Angular code for this specific action into React. I have SOME experience with React and absolutely none with Angular.

Essentially what's happening is, a user searches something which hits a DB, and once the results come back in, they "map" into a table and you can click a checkbox next to each of them and enable/disable something.. for the purpose of this question, we'll say it enables/disables comments. The Angular code is as follows

The controller:

$scope.enableComments = function() {
    var checkedItems = document.getElementsByName("checkbox-comments");
    var comments = [];
    for (var i = 0; i < checkedItems.length; i++) {
        if (checkedItems[i].checked) {
            var obj = JSON.parse(checkedItems[i].value);
            obj.Attributes = obj.Attributes | ATTRIBUTES.COMMENTS
            comments.push(obj)
        }
    }

The form.html:

<tr ng-repeat="res in resources | orderBy: predicate:reverse">
   <td>
      <input type="checkbox" name="checkbox-comments" value="">
   </td>
... some other <td>'s

There is then code that sends this update to an API which updates the comments attribute in the DB, but I know how to implement that code. I've tried implementing the controller part of this code in the exact same way in React and it does not work.

I need to somehow attach each search result row (which I do track in React state as searchResult and this is what I map out in my React code) to each checkbox next to it, and as they're checked, add them to an empty array that I can then pass as a parameter to the API call.

As for my React code currently, the "controller" is currently the same (even though it doesn't work) but my JSX is as follows:

                  <tbody>
                    {props.data.searchResult.map(el => { 
// I take the search results which are stored in state and map them to a table. The table headers are in code that I didn't include here
                      return (
                        <tr key={el.example}>
                          <td>
                            <input 
                              type="checkbox" 
                              name="streams-checkbox" 
                              value={props.data.searchResult} 
                 // I don't think this ^^^ makes sense because searchResult is an array 
                    of objects..
                            />
                          </td>
                          <td>{el.example1}</td>
                          <td>{el.example2}</td>
                          <td>{el.example3}</td>
                          <td>{el.example4}</td>

Maybe my value is wrong? Because the search result would be an array of objects.. do I need an onChange? I don't know why I can't figure this out but it's driving me crazy. Thanks in advance for any guidance and I hope I explained this well enough! The App UI showing the table (with just example data) and the checkboxes