Как изменить текст в html при помощи react?

Question

[Hlib]

Представим у нас есть какой-то дом элемент
Например:

<ul>
<li>Hello</li>
</ul>

Как поменять значение в li при помощью React js?

P.S. Сам понимаю, что до глупости легкий вопрос, но мозги просто встали

Answer 1

[Hlib]

Если кто-то будет искать ответ здесь - просто через цикл пропишите в каждом li (например) onclick функцию, которая с помощью this.innerHTML будет менять текст
В моём случае он меняется через prompt

Comments

[Антон Спирин]

Это очень плохое решение.

Почитать:
Component State
State and Lifecycle
Lifting State Up
Lists and Keys

[Hlib]

Да, так и есть, оно ужасное
Просто я не достаточно описал вопрос, дело в том что этот ul список, находится вне реакт приложения
Что делать в этой ситуации?

[Антон Спирин]

Hlib, по-хорошему перенести список в приложение, либо управлять им не из приложения, иначе это "ненормальное программирование"

Answer 2

[kova1ev]

если компонент определен через функцию:

import React, { useState} from "react";

function App() {
  const [value, setValue] = useState("Hello");

  const handleClick = (e) => {
    setValue(prompt("введите значение", value))
  }

  return (
    <div className="App">
      <ul>
        <li onClick={handleClick}>{value}</li>
      </ul>  
    </div>
  );
}

если через класс, то используйте State и setState для изменения.