state lift up!

src/boil.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+function BoilingVerdict(props){
+    if(props.celsius >= 100){
+        return <p>水は沸騰しました。</p>;
+    }
+
+    return <p>水は沸騰していません。</p>;
+}
+
+export default BoilingVerdict;

src/calculator.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import TempInput from "./tempinput"
+
+class Calculator extends React.Component {
+
+
+    render(){
+
+        return(
+        <div>
+           <TempInput scale="c"/>
+           <TempInput scale="f"/>
+        </div>
+        )
+    }
+}
+
+
+export default Calculator;

src/index.js

@@ -1,8 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import Calculator from "./maindoc.jsx";
-import Article from "./article";
+import Calculator from "./calculator.jsx";
+
 
 
 ReactDOM.render(

src/maindoc.jsx → src/tempinput.jsx

@@ -1,18 +1,15 @@
-import React from "react"
+import React from "react";
+import BoilingVerdict from "./boil";
+const scaleNames = {
+    c:"Celcius",
+    f:"Fahrenheit"
+};
 
-function BoilingVerdict(props){
-    if(props.celsius >= 100){
-        return <p>水は沸騰しました。</p>;
-    }
-
-    return <p>水は沸騰していません。</p>;
-}
-
-class Calculator extends React.Component {
+class TempInput extends React.Component {
     constructor(props){
         super(props);
         this.handleChange = this.handleChange.bind(this);
-        this.state = {temp:""};
+        this.state ={temp:""};
     }
 
     handleChange(e){
@@ -21,22 +18,18 @@ class Calculator extends React.Component {
 
     render(){
         const temp = this.state.temp;
+        const scale = this.props.scale;
         return(
             <fieldset>
-                <legend>
-                    摂氏で温度を入力してね！
-                </legend>
+                <legend>{scaleNames[scale]}で水温を入れてね：</legend>
                 <input
                     value={temp}
                     onChange={this.handleChange}
                 />
                 <BoilingVerdict celsius={parseFloat(temp)}/>
             </fieldset>
-
         );
     }
 }
 
-
-
-export default Calculator;
+export default TempInput;