How to display the data by selecting the correct column

Question

Goal:
When you press the column named "OOpen", the selected row and its value from the id (inside of syntax tr and syntax td, first td) should be displayed at consolelog (console.log("xxxxxxxxx");)

In the end the result should be for instance "data1_tr data1". Everyting is based on what column that you have clicked.

Problem:
I do not know how to retrieve the value of the id and show it at console.log("xxxxxxxxx"). console.log("xxxxxxxxx") is located inside of "openModal = () => {"

Info:
*I'm newbie in React JS
*Using the modal https://www.npmjs.com/package/react-modal#demos

Stackblitz:
https://stackblitz.com/edit/react-rlvk74

import React from "react";
import ReactDOM from "react-dom";
import { render } from 'react-dom';
import Modal from "react-modal";
import './style.css';

Modal.setAppElement("#root");

class App extends React.Component {
  state = {
    modalIsOpen: false,
    courses: []
  };

  openModal = () => {
    this.setState({ modalIsOpen: true });

    fetch(`https://jsonplaceholder.typicode.com/posts`)
      .then(results => results.json())
      .then(data => this.setState({ courses: data }))
      .catch(err => console.log(err));


    // Show the value of the id from the table tr and id of the id column based on the selected 
    // The value should be displayed inside of console.log
    console.log("xxxxxxxxx");
  };

  closeModal = () => {
    this.setState({ modalIsOpen: false });
  };

  render() {
    return (
      <div className="App">
        <button type="button" className="modal-button" onClick={this.openModal}>
          Open Modal
        </button>

        <table>
          <thead>
            <tr>
              <td>Number</td>
              <td>Button</td>
            </tr>       
          </thead>
          <tbody>
            <tr id="data1_tr">
              <td id="data1">1</td>
              <td onClick={this.openModal}>OOpen</td>
            </tr> 
            <tr id="data2_tr">
              <td id="data2">2</td>
              <td onClick={this.openModal}>OOpen</td>
            </tr>             
          </tbody>
        </table>

        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          contentLabel="Demo Modal"
        >
          <h1>Modal Header</h1>

          <table>
            <thead>
              <tr>
                <th>Number</th>
                <th>Course name</th>
              </tr>
            </thead>
            <tbody>
              {this.state.courses.map(course => {
                return (
                  <tr id={course.userId}>
                    <td>{course.userId}</td>
                    <td>{course.title}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>

          <button
            type="button"
            className="modal-button"
            onClick={this.closeModal}
          >
            Close
          </button>
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Answer 1

This is what you have change to make it work and get the value you want:

import React from "react";
import ReactDOM from "react-dom";
import { render } from 'react-dom';
import Modal from "react-modal";
import './style.css';

Modal.setAppElement("#root");

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false,
      courses: []
    };
    this.openModal = this.openModal.bind(this);
  }

  openModal = (e) => {

    this.setState({ modalIsOpen: true });

    fetch(`https://jsonplaceholder.typicode.com/posts`)
      .then(results => results.json())
      .then(data => this.setState({ courses: data }))
      .catch(err => console.log(err));


    // Show the value of the id from the table tr and id of the id column based on the selected 
    // The value should be displayed inside of console.log
    console.log(+e.target.parentElement.childNodes[0].textContent,+e.target.parentElement.childNodes[1].textContent);
  };

  closeModal = () => {
    this.setState({ modalIsOpen: false });
  };

  render() {
    return (
      <div className="App">
        <button type="button" className="modal-button" onClick={this.openModal}>
          Open Modal
        </button>

        <table>
          <thead>
            <tr>
              <td>Number</td>
              <td>Button</td>
            </tr>       
          </thead>
          <tbody>
            <tr id="data1_tr">
              <td id="data1">1</td>
              <td onClick={this.openModal}>OOpen</td>
            </tr> 
            <tr id="data2_tr">
              <td id="data2">2</td>
              <td onClick={this.openModal}>OOpen</td>
            </tr>             
          </tbody>
        </table>

        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          contentLabel="Demo Modal"
        >
          <h1>Modal Header</h1>

          <table>
            <thead>
              <tr>
                <th>Number</th>
                <th>Course name</th>
              </tr>
            </thead>
            <tbody>
              {this.state.courses.map((course, id) => {
                return (
                  <tr key={id} id={course.userId}>
                    <td>{course.userId}</td>
                    <td>{course.title}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>

          <button
            type="button"
            className="modal-button"
            onClick={this.closeModal}
          >
            Close
          </button>
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

also here is a sandbox: https://stackblitz.com/edit/react-kmffzr?file=index.js