React onClick target.value undefined

Question

I'm using Antd to generate Tags and I want to modify state using onClick event.

My parent Component (Where I generate a List of Items)

onRiskClick(e) {
    e.preventDefault();
    console.log(e.target);
    console.log(e.target.value);
  }
[...]
render() {
return (
[...]
<div className="square risk_orange">
              <RenderingRiskMatrix
                risks={this.state.risks}
                impact="2"
                likelihood="5"
                color="red"
                onRiskClick={this.onRiskClick} <-- passing onRiskClick function as props
              ></RenderingRiskMatrix>
            </div>

My Child Function RenderingRiskMatrix

<Tooltip key={risk.id} title={risk.name}>
            <Tag
              key={risk.id}
              color={props.color}
              onClick={(event) => props.onRiskClick(event)}
            >
              {risk.id}
            </Tag>
</Tooltip>

What I got in console :

<span class="ant-tag ant-tag-red" ant-click-animating-without-extra-node="false">R028</span>
undefined

which means e.target exists and not e.target.value which should be R028 no ?

Thanks,

Answer 1

I think there is a simpler way to accomplish your goal. The value you want is a child, not the value. You already have access to the value you want though, so I would use it like this:

<Tooltip key={risk.id} title={risk.name}>
  <Tag
    key={risk.id}
    color={props.color}
    onClick={() => props.onRiskClick(risk.id)}
  >
    {risk.id}
  </Tag>
</Tooltip>

Then use it like this:

onRiskClick(value) {
  console.log(value);
}

This will be a more flexible solution than accessing the innerHTML from the event target. You can now display it any way you want (or even render another component), and you function will still get the value it needs.