diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index ee855b5604d46e7065bc77382ce3a7843d23a2d6..cfda6f164bba6c2a570abe82b135a23c623519ad 100644 --- a/examples/web/react/app.tsx +++ b/examples/web/react/app.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import ReactDOM from "react-dom/client"; import { Button } from "./components"; @@ -6,8 +6,10 @@ import { Button } from "./components"; import "./app.css"; export const App = () => { - const getText = () => "Hello World"; - return <Button text={getText()} />; + const [count, setCount] = useState(0); + const getText = () => `Hello World ${count}`; + const onClick = () => setCount(count + 1); + return <Button text={getText()} onClick={onClick} />; }; export const startApp = (element: string) => { diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx index 39350d86c253170e4448234fa6039ff3a9eb4ff2..ed0409397e013e88b326f256d2f6e06228f2b16c 100644 --- a/examples/web/react/components/button/button.tsx +++ b/examples/web/react/components/button/button.tsx @@ -2,20 +2,26 @@ import React, { FC } from "react"; import "./button.css"; -export const Button: FC<{ text: string; size?: string; style?: string[] }> = ({ +type ButtonProps = { + text: string; + size?: string; + style?: string[]; + onClick?: () => void; +}; + +export const Button: FC<ButtonProps> = ({ text, size = "small", - style = ["simple", "border"] + style = ["simple", "border"], + onClick = undefined }) => { - const onClick = () => { - alert("Hello World"); - }; - const classes = () => ["button", size, ...style].join(" "); - + const _onClick = () => (onClick ? onClick() : undefined); return ( - <span className={classes()} onClick={onClick}> + <span className={classes()} onClick={_onClick}> {text} </span> ); }; + +export default Button;