[React]state select

select 목록을 선택시 선택된 값이 출력되는 기능을 구현해봤다.

import React, { useState } from "react";
import "./styles.css";

function SelectExam(){
const [choice, setChoice] = useState("peach")
const fruits = ["apple", "orange", "peach", "cherry", "strawberry"]
const options = fruits.map((fruit) => {
return <option value={fruit}>{fruit}</option>
});

handleFruit() = (event) => {
setChoice(event.target.value);
}

return(
<div class="APP">
<select onChange={handleFruit}>{options}</select>
<h3>You choose "{choice}"</h3>
</div>
);
}

export default SelectExam;

select 값이 state이고 목록에 따라 상태 값이 변하는 코드를 작성해보았다.

이번에는 popup버튼 클릭시 팝업창이 열리고 닫힘버튼 클릭시 닫히는 기능을 구현해보았다.

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = () => {
    if (showPopup === false) {
      setShowPopup(true);
    } else {
      setShowPopup(false);
    }
    
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      <button className="open" onClick={togglePopup}>
        Open me
      </button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;

useState의 초기값이 false이므로 조건문 작성시 false를 넣어줘야 popup이 제대로 작동한다.