[React] React & React Hooks -useState practice 👻

[class] Count++

import React, { useState } from "react";

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <p>You clicked {count} times!</p>
        <button onClick={() => this.setState({ count: count + 1 })}>Click Click!</button>
      </div>
    )
  }
}

export default App;

---

[useState] Count++

import './App.css';
import React, { useState } from "react";
import { render } from '@testing-library/react';

const Count = () => {
  const [count, setCount] = useState(0);


  return (
    <div>
      <p>You clicked {count} times!</p>
      <button onClick={() => setCount(count + 1)}>Click here!</button>
    </div>
  )
}

export default Count;

---

[useState] Select Box

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

function SelectExample() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });

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

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

export default SelectExample;

---

[useState] Popup!

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

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

  const togglePopup = () => {
    setShowPopup(true);
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/*should i put sth here?..*/}
      <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;

opposite funciton is not working..
clicking "close me" must show the initial page.