43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
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)); |