Show value at the alert msg by selecting cell - reactjs

Question

Goal:
When you press one of the cell (only for column country) containing the name of a country, a alert message with the name of the country should be displayed.
Problem:
What part am I missing in the source code.
Do not know what syntax code is needed in order to achieve the goal.
Any advice?
Info:
I'm newbie in reacjt.
Stackblitz:
https://stackblitz.com/edit/react-faabjl
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
sayHello() {
alert('');
}
render() {
return (
<div>
<Hello name={this.state.name} />
<table border="1">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td onClick={this.sayHello}>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td onClick={this.sayHello}>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td onClick={this.sayHello}>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td onClick={this.sayHello}>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td onClick={this.sayHello}>Italy</td>
</tr>
</tbody>
</table>
</div>
);
}
}
render(<App />, document.getElementById('root'));

Answer 1

Your sayhello function by default contains the event object. By that you can extract the name of the country needs to be displayed.I have rewritten your code.However for large set of table data you need to use a map function to iterate over the whole array of objects and display the result.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
sayHello(e) {
alert(e.target.innerHTML);
}
render() {
return (
<div>
<Hello name={this.state.name} />
<table border="1">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td onClick={this.sayHello}>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td onClick={this.sayHello}>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td onClick={this.sayHello}>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td onClick={this.sayHello}>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td onClick={this.sayHello}>Italy</td>
</tr>
</tbody>
</table>
</div>
);
}
}
render(<App />, document.getElementById('root'));
You can use a map function like this.
let array = [{company:'Alfreds Futterkiste',contact:'Maria Anders',Country:'Germany'},{company:'centro',contact:'Franciso',country:'Mexico'}]
Now you can iterate over the array with map function.
array.map(element=>{
return <tr key={element.company}>
<td>{element.company}</td>
<td>{element.contact}</td>
<td onClick={this.sayhello}>{element.country}</td>
</tr>
}

Answer 2

I think this is what you want, for Hello component to work you need to update your state to be able to update its value, and to do so you have to bind your event listener to your class component like this:
this.sayHello = this.sayHello.bind(this);
The following is the full code snippet:
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
this.sayHello = this.sayHello.bind(this);
}
sayHello(e) {
this.setState({
name: e.target.textContent
});
alert(e.target.textContent);
}
render() {
return (
<div>
<Hello name={this.state.name} />
<table border="1">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td onClick={this.sayHello}>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td onClick={this.sayHello}>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td onClick={this.sayHello}>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td onClick={this.sayHello}>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td onClick={this.sayHello}>Italy</td>
</tr>
</tbody>
</table>
</div>
);
}
}
render(<App />, document.getElementById('root'));
you can just treat sayHello() like a normal event in javascript
https://stackblitz.com/edit/react-3zzcoe?file=index.js