리액트 명함리스트

 

 

import React from "react";

export default function Create({ username, onChange, age, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
      <input name="age" placeholder="나이" onChange={onChange} value={age} />
      <button onClick={onCreate}>등록</button>
    </div>
  );
}

 

 

import React from "react";

function UserMap({ props, onRemove }) {
  return (
    <div>
      {props.username}:{props.age}
      <button onClick={() => onRemove(props.username)}>삭제</button>
    </div>
  );
}

export default function BusinessCard({ user, onRemove }) {
  return (
    <div>
      {user.map((test) => (
        <UserMap props={test} onRemove={onRemove} />
      ))}
    </div>
  );
}

 

 

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

export default function App() {
  const [inputs, setInputs] = useState({
    username: "",
    age: ""
  });

  const { username, age } = inputs;
  const onChange = (e) => {
    setInputs({
      ...inputs,
      [e.target.name]: e.target.value
    });
  };

  const [user, setUser] = useState([
    {
      username: "홍길동",
      age: 18
    },
    {
      username: "이유진",
      age: 29
    }
  ]);

  const onCreate = () => {
    const newUser = {
      username,
      age
    };
    setUser(user.concat(newUser));
    setInputs({
      username: "",
      age: ""
    });
  };

  const onRemove = (username) => {
    setUser(user.filter((test) => test.username !== username));
  };

  return (
    <div className="App">
      <BusinessCard user={user} onRemove={onRemove} />
      <Create
        onCreate={onCreate}
        onChange={onChange}
        username={username}
        age={age}
      />
    </div>
  );
}