ReactJS: How do i give action to a button and store that?

I just want to give an action to a TR button but also it will run when i press after Search button. Here is my code:

function App() {
  const [temperature, setTemperature] = useState("");
  const [city, setCity] = useState("istanbul");
  const [desc, setDesc] = useState("");
  const [name, setName] = useState("");
  const [humidity, setHumidity] = useState("");
  const [visibility, setVisibility] = useState("");
  const [windspeed, setWineSpeed] = useState("");
  const [wicon, setWicon] = useState("");
  const [lang, setLang] = useState("");
  const getWeatherData = () => {
    axios({
      method: "GET",
      url: `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=myapikey&lang=${lang}`,
    }).then((response) => {
      setTemperature(Math.round(response.data.main.temp - 273.15));
      setDesc(response.data.weather[0].description);
      setName(response.data.name);
      setHumidity(response.data.main.humidity);
      setVisibility(response.data.visibility / 1000);
      setWineSpeed(response.data.wind.speed);
      setWicon(response.data.weather[0].icon);
      console.log(response);
    }, []);
  };
  function changeLang(){

 if("tr"){
   document.getElementById("id01").innerHTML="Nem"
   document.getElementById("id02").innerHTML="Görüş Mesafesi"
   document.getElementById("id03").innerHTML="Rüzgar Hızı"
 }
};
    

I created function changeLang() above but it changes immediately. And here is my code inside return()

return (
    <>
      <div class="container">
        <div class="wc">
          <div class="image">
          <div className="temp">
                {temperature}
                <span>&deg;</span>
              </div>
            <img
              className="weatherimg"
              alt="image1"
              src={`http://127.0.0.1:5500/src/${wicon}.svg`}
            />
          </div>
          <div class="hum-visib">
            <img
              alt="humidity1"
              className="humidityimg"
              style={{ width: "5", height: "5" }}
              src="http://127.0.0.1:5500/src/humidity.svg"
            ></img>
            <p id="id01"className="humidity">Humidity {humidity}%</p>
            <img
              alt="visibility1"
              className="visibilityimg"
              style={{ width: "5", height: "5" }}
              src="http://127.0.0.1:5500/src/visibility.svg"
            ></img>
            <div id="id02" className="visibility">
              Visibility {visibility} km
            </div>
            <img
              alt="windspeed1"
              className="windimg"
              style={{ width: "5", height: "5" }}
              src="http://127.0.0.1:5500/src/wind.svg"
            ></img>
            <div id="id03"className="windspeed">Wind Speed {windspeed} km</div>
          </div>
          <div class="input">
          <button class="trbtn" value="tr" onClick={changeLang} >TR</button>
             <button class="enbtn" onClick={(e)=> setLang(e.target.value)} value="en">EN</button>
            <form id="content" autoComplete="off">
              <input
                type="text"
                name="input"
                className="Search-box"
                onChange={(e) => setCity(e.target.value)}
              />
              <p>Your City {name}</p>
            </form>
            <button
              className="searchbtn"
              onClick={() => {
                getWeatherData(city);
              }}
            >
              Search
            </button>
             </div>
          <div className="chart">
        {/* BURASI CHART ALANI     */}
        </div>
          <div class="days">
            <div className="temp">
              {temperature}
              <span>&deg;</span>
            </div>
            <div id="summary">{desc}</div>
            <div className="temp">
              {temperature}
              <span>&deg;</span>
            </div>
            <div id="summary">{desc}</div>
            <div className="temp">
              {temperature}
              <span>&deg;</span>
            </div>
            <div id="summary">{desc}</div>
          </div>
        </div>
        <div class="weathercard">
          <div class="FLEXWEATHER">
            <div style={{ fontWeight: "bold", marginTop: "4px" }}>{name}</div>
          </div>
        </div>
      </div>
    </>
  );
}

So, i want to change language of Humidity,Visibility and Wind Speed when i press TR button then pressing Search button.Think that TR and EN buttons are toggle button.

Answer

You could create a state with a boolean and check whether turkish is set to either true or false. This you could toggle with a button. Once you have that state you can write a simple line in your JSX code to change the content of it, something similar to this:

[turkish, setTurkish] = useState(false)

Then within you JSX code you could use

<p id="id01"className="humidity">{turkish ? Nem : Humidity}</p>

Or you could even declare these strings earlier by storing them in a variable and then using the variable in the jsx code.