state simple example

App.jsx

import React, {useState} from 'react'
import './App.css'

const getRandomColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
};

function MyButton() {
    const [color, setColor] = useState('blue'); // color - состояние, setColor - функция для его изменения
    // деструктурирующее присваивание, useState возвращает массив с двумя элементами

    return (
        <button style={{ backgroundColor: color }} onClick={() => setColor(getRandomColor())}>
            Нажми меня
        </button>
    );
}


function BorderedButton() {
    return (
        <div className="bordered">
            <MyButton />
        </div>
    );
}

export class MyHeader extends React.Component {
    render() {
        return <h1>Hello</h1>
    }
}

function App() {
    return (
        <>
            <MyButton/>
            <MyHeader/>
            <BorderedButton />
        </>
    )
}

export default App