juicyigor

const locations = [
  {
    city: "New York"
  },
  {
    city: "Moscow"
  }
];

const First = props => 
  <div className="first">
    <button onClick={props.handleClick}>
      click
    </button>
    <p>{props.city}</p>
  </div>;

const Second = props => 
  <div className="second">
    <span>
      {props.city && props.city}
    </span>
  </div>;

class TestComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedCity: false,
    };
  }
  
  handleClick = city => () => {
    this.setState({
      selectedCity: city,
    });
  };
  
  render() {
    return (
      <div>
        {locations.map((data, i) => 
          <First 
            city={data.city} 
            handleClick={this.handleClick(data.city)} 
          />
        )}
        <Second city={this.state.selectedCity} />
      </div>
    );
  }
}

ReactDOM.render(
<TestComponent />, 
document.querySelector('[data-role-id="content"]'));

Здесь есть небольшой недочет в том, что this.handleClick при перерисовке пересоздается, но думаю для вас это не очень критично