单击名称 - 显示电话号码 React

Question

So I have this list of people and I would like to make the name clickable so that it displays the location of the person.

How could I do this?

So when clicking on the first <li> it would display the second <li> on the screen - with an Alert for instance.

<ul>
  { props.owners.map((owners, j) => (
  <div key={j}>
    <li> {owners.nameOwner}</li>
    {/*
    <li>{owners.locationOwner} </li> */} {/*
    <li>Phone Number : {owners.phoneOwner} </li> */}
    <li> Start Date: {owners.startDateOwner.toString()} </li>
    <li> End Date: {owners.endDateOwner.toString()} </li>
  </div>
  )) }
</ul>

Answer 1

In React you can add a simple onClick -Attribute like that:

<li onClick={function () {

alert(owners.locationOwner);

}} > {owners.nameOwner}</li>

It is basically onClick={} that takes in a function. This function is called when the onClick-Event happens.

React Docs

Answer 2

class Demo extends Component {

    //suppose you have a list something like this

    state = { 
        owners:[{"name" :" owners1"}, { "name": "owners2"}, { "name" : "owners3"},{ "name" : "owners4"}]

     }
    render() { 
        return ( 
            <div >
            { this.state.owners.map((it) => 
               ( <li><a href="#">{it.name}</a></li>)
            )}
            </div>
         );
    }
}
 
export default Demo;