Переключение между различными режимами кнопок в React Js

Для разработки этого переключателя видимости нам нужна всего одна кнопка, которая будет переключать два разных текста в зависимости от функции кнопки, теперь в пользовательском интерфейсе будет отображаться две разные кнопки, но есть только одна кнопка, которая будет иметь логическое значение, которое указывает или печатает на экране, является ли следующее утверждение истинным или ложным, поэтому мы кодируем его следующим образом:

Обратите внимание, что мы уже должны были создать корневой идентификатор в HTML, чтобы связать его с реагирующим приложением.

Const exampleTemplate = (
<div>
<h1> Example Header</h1>

Выше у нас есть заголовок, а ниже у нас есть нужная единственная кнопка, мы создаем функцию onClick:

<button onClick={exampleClickFunction}>
     {exampleClickVisible ? ‘example hide text’ : ‘example view text’}
</button>

Теперь в приведенной выше кнопке выражение используется как оператор спреда.

</div>
{exampleVisible && (
<div>
<p>here is the text</p>
</div>)}
);

//поэтому мы создаем переменную, содержащую логическое значение и функцию по клику, которая запускает //изменение кнопки в соответствии с логическим значением и переключателем видимости.

const exampleVisible = false;
const exampleClickFunction = () => {
exampleVisible= !exampleVisible
}

Эта функция просто изменяет значение переменной на not.
Теперь все, что нам нужно сделать, чтобы это заработало, — это перерисовать код в функцию.

const exampleRender = () => {
const exampleTemplate = (
<div>
<h1> Example Header</h1>

Выше у нас есть заголовок, а ниже у нас есть нужная единственная кнопка, мы создаем onClick fn.

<button onClick={exampleClickFunction}>
   {exampleClickVisible ? ‘example hide text’ : ‘example view text’}
</button>
</div>

Теперь в приведенной выше кнопке выражение используется как оператор спреда.

{
  exampleVisible && (
   <div>
    <p>here is the text</p>
  </div>
 )}
);

Мы создаем переменную, содержащую логическое значение и функцию щелчка, которая запускает кнопку, изменяется в соответствии с логическим значением и переключателем видимости.

let exampleVisible = false;
const exampleClickFunction = () => {
    exampleVisible= !exampleVisible
}

Эта функция изменяет значение переменной на противоположное логическое значение.

ReactDOM.render(exampleTemplate, document.getElementById(appRoot))
};