Comment accéder aux données dans la fonction map pour onClick dans react

Question

J'étais curieux de savoir comment il était possible d'accéder à des données dans une fonction map afin qu'elles puissent être utilisées dans le paramètre d'événement lors du passage d'une fonction dans une fonction onClick dans React.

Voici ma fonction handleClick. J'aimerais avoir accès à la propriété nommée "d" de la fonction map en utilisant l'événement dans handleClick. S'il y a un autre moyen d'avoir accès à la variable "d" pour que je puisse l'utiliser dans handleClick, ce serait vraiment génial. Je n'ai pas trouvé de solution spécifique pour ce type de scénario et je me demandais si je pouvais obtenir de l'aide. Je vous remercie.

// Gain access to the parameter data from the map function  
public handleClick(event: React.MouseEvent<HTMLAnchorElement>) {
    console.log(event);
  }

  public render() {
    return (
      <div className="">
        {this.props.data.slice(0, MAX_RESULTS_LENGTH).map((d: any) => (
          <a tabIndex={0} onClick={this.handleClick} key={d.id}>
            {d.address}
          </a>
        ))}
      </div>
    );
  }
}

Answer 1

Il suffit de le passer comme un inline function

  public render() {
    return (
      <div className="">
        {this.props.data.slice(0, MAX_RESULTS_LENGTH).map((d: any) => (
          <a tabIndex={0} onClick={e => this.handleClick(e, d)} key={d.id}>
            {d.address}
          </a>
        ))}
      </div>
    );
  }
}

public handleClick(event: React.MouseEvent<HTMLAnchorElement>, d: any) {
    console.log(event, d);
}