state2

input 값 가져오기

return (
            <div>
                <h1 className="hi">Super Converter</h1>
                <label htmlFor="minutes">Minutes</label>
                <input id="minutes" placeholder="Minutes" type="number" />
                <label htmlFor="hours">Hours</label>
                <input id="hours" placeholder="Hours" />
            </div>
        );

이렇게 하면 라벨 클릭 시 해당 input창으로 이동된다.

JSX 에서는 html 에서 사용되는 for, class 등을 사용하면 안되고, for-> htmlFor , class-> className 으로 바꿔서 사용해야 한다.

<input
                  value={minutes}
                  onChange={onChange}
                  id="minutes"
                  placeholder="Minutes"
                  type="number" />
              <h4> You want to convert {minutes}</h4>

여기서 minutes 는 state로,

const onChange = (e) => {
           setMinutes(e.target.value);
       }

이렇게 input 값을 가져올 수 있다.

fliped

const [fliped, setFliped] = React.useState(false);
        const onFliped = () => {
            reset();
            setFliped(!fliped);
            //setFliped((amount)=>!amount);
            //이렇게 간접적으로 data를 변화시켜주는게 좋다.
        
 value={flipped ? amount * 60 : amount}
   -> flipped가 true면 value= amount*60

option tag

<select value={index} onChange={onselect}>
        <option value='xx'>Select your units</option>
        <option value='0'>Minutes & Hours</option>
        <option value='1'>Km & Miles</option>
</select>
                <hr />
{index === 'xx' ? "Please select your units" : null}
{index === '0' ? <MinutesToHours /> : null}
{index === '1' ? <KmToMiles /> : null}

option 의 value 값 이용해서 value값에 따라 돔에 그리기.