function App(){
    return(
        React.createElement('div',{
            style:{
                backgroundColor:"black"
            }

        },
        React.createElement(Box,{kezdo:5,felirat:"Box A",hatterszin:"green"}),
        React.createElement(Box,{kezdo:1,felirat:"Box B",hatterszin:"yellow"}),
        React.createElement(Box,{kezdo:67,felirat:"Box C",hatterszin:"red"}))
    )

}

function Reset({setSzamlalo}){
    return(
        React.createElement('button',{
            className:"btn btn-primary m-2",
            onClick:(e)=>{setSzamlalo(0);e.stopPropagation()}
        },"Reset")
    )
}

function Box({felirat,kezdo,hatterszin}){

    const[szamlalo,setSzamlalo]=React.useState(kezdo);

    return(
        React.createElement('div',{
            style:{
                width:"200px",
                height:"200px",
                backgroundColor:hatterszin
            },
            className:"p-2 m-5 rounded",
            onClick:()=>setSzamlalo(prev=>prev+1)
        },felirat," ",szamlalo,React.createElement(Reset,{setSzamlalo:setSzamlalo}))
    )
}

const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));