-
Notifications
You must be signed in to change notification settings - Fork 32
/
react_lifting_state.html
67 lines (61 loc) · 1.58 KB
/
react_lifting_state.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>Lifting State Example</title>
<style>
.temp {
margin-top: 10px;
font-weight: bold;
}
</style>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Input component using render prop
function Input(props) {
const [value, setValue] = React.useState("");
return (
<div>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Temp in °C"
/>
{props.render(value)}
</div>
);
}
// Kelvin component
function Kelvin({ value = 0 }) {
return <div className="temp">{Number(value) + 273.15}K</div>;
}
// Fahrenheit component
function Fahrenheit({ value = 0 }) {
return <div className="temp">{(Number(value) * 9) / 5 + 32}°F</div>;
}
// App component
function App() {
return (
<div className="App">
<h1>Temperature Converter</h1>
<Input
render={(value) => (
<>
<Kelvin value={value} />
<Fahrenheit value={value} />
</>
)}
/>
</div>
);
}
// Render the App component
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>