리액트 20강

할일 목록 화면에 표시

import {useState} from "react";

export default function Item({item:i}){
    const [item, setItem] = useState(i);
    return(
        <tr>
                <td><input type="checkbox" checked={item.status === "done"? true:false}/></td>
                <td>{item.task}</td>
                <td>{item.due}</td>
                <td></td>
            </tr>
    );
}

 

item.js

import Item from "./Item";

export default function items() {

    var item={status:"todo", task:"커피마시기", due:"20220330"}; //todo=해야되는 일이라서 체크표시

    return (
    <table>
        <td></td>
        <td>Task</td>
        <td>Due</td>
        <td></td>
        <Item item={item}/>
        <Item item={item}/>
        <Item item={item}/>
    </table>
    );
}

items.js

이렇게 체크박스가 생깁니당^0^