semantic-ui-react : modify component itself without overload with new method at onClick event

Question

I've set an example here : https://codesandbox.io/s/lucid-morning-bd8nn0

I've trying using "this." but I can't found method to do this. I don't want to extend Label component and implement a homemaid method to do this. I'm expecting to found a solution using native REACT / semantic-ui method to do this.

Below my code and I'd like to update Label component itself at onClick event.

import "./styles.css";
import { Label } from "semantic-ui-react";

export default function App() {
  return (
    <div className="App">
      <Label
        as="a"
        color="green"
        tag
        onClick={(e) => {
          // I'd like to update the text of this LABEL
          // any idea to do this ?
        }}
      >
        Click here to change text
      </Label>
    </div>
  );
}

Any idea ? Thanks for your help.

Answer 1

You can use local state to accomplish that:

import "./styles.css";
import { Label } from "semantic-ui-react";
import { useState } from "react";

export default function App() {
  const [labelText, setLabelText] = useState("Click here to change text");

  return (
    <div className="App">
      <Label
        value="XXXXX"
        as="a"
        color="green"
        tag
        onClick={(e) => {
          setLabelText("updated text");
        }}
      >
        {labelText}
      </Label>
    </div>
  );
}