React JS:
用來實作使用者介面的 JavaScript 函式庫

• 組件(Component):
  React component 需要實做 render() function，這個 function 接受輸入的資料並回傳需要顯示的內容。
  Map.js內 呼叫對應的ToDoList.js

import React, { Component } from 'react';
/*import OpenLayer from './OpenLayer.js'*/
import ToDoList from './ToDoList.js'

export class Map extends Component {
    render() {
        /*return <OpenLayer />*/
        return <ToDoList />
    }
}

• ToDoList.js內容

import { React, useState } from "react";
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Button from 'react-bootstrap/Button';

function GetData() {
    return [{
        Key: 1,
        Name: '上班',
        Checked: true
    }, {
        Key: 2,
        Name: '吃飯',
        Checked: false
    }, {
        Key: 3,
        Name: '睡覺',
        Checked: false
    }, {
        Key: 4,
        Name: '摸魚',
        Checked: true
    }]
}
function ToDoList() {
    const [datas, setDatas] = useState(GetData());
    return (
        <>
            {
                datas.map((data) => (
                    <ToDoListItem
                        key={data.Key}
                        Name={data.Name}
                        Checked={data.Checked}
                        onDelete={() => {
                            setDatas(datas.filter((a)=> a.Key !== data.Key))
                        }}
                    ></ToDoListItem>
                ))
            }
        </>
    );

}
export default ToDoList;

function ToDoListItem(props) {
    return (
        <InputGroup>
            <InputGroup.Checkbox key={props.Key} checked={props.Checked} />
            <Form.Control value={props.Name} />
            <Button variant="danger" onClick={props.onDelete} >刪除</Button>{' '}
        </InputGroup>
    );
}

• 模塊化(Module)用法:
  這裡的ToDoListItem，也可以另外獨立一個ToDoListItem.js

 <ToDoListItem
    key={data.Key}
    Name={data.Name}
    Checked={data.Checked}
    onDelete={() => {
        setDatas(datas.filter((a)=> a.Key !== data.Key))
    }}
></ToDoListItem>

function ToDoListItem(props) {
    return (
        <InputGroup>
            <InputGroup.Checkbox key={props.Key} checked={props.Checked} />
            <Form.Control value={props.Name} />
            <Button variant="danger" onClick={props.onDelete} >刪除</Button>{' '}
        </InputGroup>
    );
}

• 屬性(Prop)用法:

key={data.Key}
Name={data.Name}
Checked={data.Checked}
onDelete={() => {
    setDatas(datas.filter((a)=> a.Key !== data.Key))
}}

• 狀態(State)用法:

const [datas, setDatas] = useState(GetData());

• 事件(Event)用法:

onClick={props.onDelete}

• 使用react-bootstrap( https://react-bootstrap.netlify.app/docs/components/buttons/ ) 美化畫面
  基本上都是靠 Ctrl+C, Ctrl+V貼過來修修改改

參考:

• https://zh-hant.legacy.reactjs.org/
• https://react-bootstrap.github.io/
• https://www.youtube.com/watch?v=l789xaPU1WM
• https://react-bootstrap.netlify.app/docs/components/list-group