Интерактивность содержимого

В коде осуществляется создание двух кнопок.

При нажатии на определённую кнопку на экране появляется определённая строка.

В файле index.js пишем код:

import React, {Component} from 'react';
import {render} from 'react-dom';

// описание констант
const MESSAGE_1 = "FIRST string";
const MESSAGE_2 = "SECOND string";
const MESSAGE_START = "IT IS START MESSAGE";

/**
 * класс
 * отвечает за контроль щелчков по кнопкам
 * отвечает за вывод определённой строки на экран
 */
class MyStringPrinter extends Component {
    /**
     * конструктор
     * @param props
     */
    constructor(props) {
        super(props);

        // задаём начальное состояние
        this.state = {
            stringFirst: MESSAGE_1,
            stringSecond: MESSAGE_2,
            stringResult: MESSAGE_START,
        };
    }

    /**
     * щелчок по первой кнопке
     */
    btnFirstClickMethod = ()  => {
        console.log("btn FIRST click");
        const resultStr = this.state.stringFirst;

        // изменяем состояние
        this.setState({
            stringFirst: MESSAGE_1,
            stringSecond: MESSAGE_2,
            stringResult: resultStr,
        });
    };

    /**
     * щелчок по второй кнопке
     */
    btnSecondClickMethod = () => {
        console.log("btn SECOND click");
        const resultStr = this.state.stringSecond;

        // изменяем состояние
        this.setState({
            stringFirst: MESSAGE_1,
            stringSecond: MESSAGE_2,
            stringResult: resultStr,
        });
    };

    /**
     * обязательный метод
     * осуществляет вывод разметки на экран
     * @returns {*}
     */
    render() {
        return (
            <div>
                <button onClick={this.btnFirstClickMethod}>Задать строку один</button>
                <br/>
                <br/>
                <button onClick={this.btnSecondClickMethod}>Задать строку два</button>
                <br/>
                <br/>
                <b>
                    {this.state.stringResult}
                </b>
            </div>
        )
    }
}

// главная функция
// осуществляет вывод всего содержимого на экран
function PrintMain() {
    return (
        <div>
            <MyStringPrinter/>
        </div>
    )
}

// выводим всё содержимое на экран
render(<PrintMain/>, document.getElementById('root'));

Запускаем приложение

Пишем в консоли:

npm start