ReactJS cơ bản qua ví dụ thực tế - B4 tạo Mockdata và render Item

Nội dung chính

1. Tạo mockdata
2. Thêm package UUID
3. Hàm Render Item ở App.js
4. In giá trị ở Item.js

1. Tạo mockdata

Vì đây là một project cơ bản nên chúng ta sẽ làm việc với các dữ liệu có sẵn do chính mình tạo ra, cái này gọi là mockdata hay dữ liệu ảo. Các bạn vào folder src và tạo thêm folder mockdata. Bên trong folder này ta add file tên là Items.js để tạo 1 mảng các đối tượng chứa dữ liệu.


const Items = [
    {
        id: "abc1",
        name: "Tìm thấy mảnh vỡ máy bay rơi ở Iran làm 66 người chết",
        level: 2 // high
    },
    {
        id: "abc2",
        name: "Không còn tranh cướp lộc hoa tre ở lễ hội đền Gióng 2018",
        level: 0 // low
    },
    {
        id: "abc3",
        name: "Hơn 37.000 người nhập viện vì tai nạn giao thông, đốt pháo",
        level: 1 // medium
    },
    {
        id: "abc4",
        name: "Gần 200 người chết vì tai nạn giao thông 7 ngày nghỉ Tết",
        level: 0 // low
    },
    {
        id: "abc5",
        name: "VFF giải ngân 15 tỷ đồng, tiền thưởng tới tay U23 VN trước Tết",
        level: 2 // high
    },
    {
        id: "abc6",
        name: "F1 muốn tổ chức giải đua xe tại Việt Nam vào năm 2020",
        level: 1 // medium
    }
];

export default Items;

2. Thêm package UUID

Ta thấy ở mảng trên các id đều là do mình tự đặt, chúng ta có thể sử dụng thêm package uuid để nó tự sinh mã id, các bạn có thể tham khảo thêm về package này tại https://www.npmjs.com/package/uuid

Để thêm package này trước tiên ta phải dừng chạy project, quay lại màn hình cmd và nhấn tổ hợp phím Ctrl + C, nhấn Y và nhấn enter để xác nhận dừng chạy project.

Để thêm package ta gõ vào dòng sau npm install uuid --save

Sau khi đã add xong chúng ta chạy lại project của mình bằng cách gõ npm start

Trong package có nhiều kiểu uuid khác nhau, chúng ta sẽ import uuidv4 để nó sinh ra mã ngẫu nhiên và gắn vào giá trị của các id như code bên dưới.


import uuidv4 from 'uuid/v4';

const Items = [
    {
        id: uuidv4(),
        name: "Tìm thấy mảnh vỡ máy bay rơi ở Iran làm 66 người chết",
        level: 2 // high
    },
    {
        id: uuidv4(),
        name: "Không còn tranh cướp lộc hoa tre ở lễ hội đền Gióng 2018",
        level: 0 // low
    },
    {
        id: uuidv4(),
        name: "Hơn 37.000 người nhập viện vì tai nạn giao thông, đốt pháo",
        level: 1 // medium
    },
    {
        id: uuidv4(),
        name: "Gần 200 người chết vì tai nạn giao thông 7 ngày nghỉ Tết",
        level: 0 // low
    },
    {
        id: uuidv4(),
        name: "VFF giải ngân 15 tỷ đồng, tiền thưởng tới tay U23 VN trước Tết",
        level: 2 // high
    },
    {
        id: uuidv4(),
        name: "F1 muốn tổ chức giải đua xe tại Việt Nam vào năm 2020",
        level: 1 // medium
    }
];

export default Items;

3. Hàm Render Item ở App.js

Trước tiên chúng ta phải import các dữ liệu mockdata ở Items.js vào trong file App.js


import Items from './mockdata/Items';

Sau đó chúng ta sẽ cho Items vào làm một state ở trong constructor của App.js


constructor(props) {    
    super(props);
    this.state = {
        items: Items
    }
}

Tiếp theo ta viết một hàm là renderItem có nhiệm vụ tách dữ liệu mảng trên và tương ứng với mỗi đối tượng trong mảng sẽ là một Component Item, cách viết hàm dưới đây và về sau này đều sử dụng cách viết của ES6


renderItem = () => {
    return(111);
}

Tiếp theo ta sẽ gọi hàm này bên trong đoạn tbody vì các sản phẩm sinh ra sẽ nằm bên trong đó


<tbody>
    {this.renderItem()}
</tbody>

Trong phương thức renderItem, việc đầu tiên là ta phải lấy được state items chứa mảng dữ liệu.


renderItem = () => {
    let {items} = this.state;
}

Ta sử dụng hàm map để duyệt mảng items.


renderItem = () => {
    let {items} = this.state;
    return items.map((item) => {
        console.log(item);
    });
}

Nếu bạn bấm phím F12 trên trình duyệt Chrome và chọn tab Console thấy in ra được kết quả như ảnh dưới là chúng ta đã sử dụng thành công phương thức map rồi (tất nhiên là id của bạn sinh ra sẽ khác của mình)

Trước khi in các Component Item vào bên trong hàm map ta phải import chúng vào trước đã.


import Item from './components/Item';

Việc tiếp theo là thay đoạn console.log(item) bằng Component Item đã add ở trên, lưu ý là ta sẽ phải thêm một tham số index trong hàm trả về. Ta sẽ gắn các giá trị trả về tương ứng làm props của Item, index được dùng để đánh số thứ tự, key để tránh trùng mỗi phần tử khi lặp và item để gửi sang in kết quả.


renderItem = () => {
    let {items} = this.state;
    return items.map((item, index) => {
        return (
            <Item index={index+1} item={item} key={item.id} />
        )
    });
}

Nếu trên trình duyệt in được ra kết quả như này là chúng ta sắp đi đến thành công rồi.

4. In giá trị ở Item.js

Ở bước 3 chúng ta đã gửi các giá trị thông qua props của <Item />, giờ chỉ việc lấy các giá trị đó gắn vào là xong.

Mở file Item.js nằm trong folder components Trong hàm render của nó ta phải lấy được các giá trị đã được gửi qua từ file App.js


render() {
    let {item,index} = this.props;
    return(
        ...
    )
}

Đơn giản nhất là ta in số thứ tự ra trước đã.


render() {
    let {item,index} = this.props;
    return(
        <tr>
            <td className="text-center">
                {index}
            </td>
            ...
        </tr>
    )
}

Tiếp theo là in tên của item, lưu ý item là đối tượng


render() {
    let {item,index} = this.props;
    return(
        <tr>
            <td className="text-center">
                {index}
            </td>
            <td>
                {item.name}
            </td>
            ...
        </tr>
    )
}

Việc tiếp theo là in giá trị level, cái khó ở đây là giá trị level là số number và tương ứng mỗi giá trị sẽ có một kiểu label khác nhau.


level = 0  ===> class: label-info    ===> text: Low
level = 1  ===> class: label-warning ===> text: Medium
level = 2  ===> class: label-danger  ===> text: High

Để code dễ dàng có lẽ chúng ta nên dùng switch ... case là tốt nhất. Sau một hồi hí hoáy chúng ta có code của toàn bộ file Item.js như sau.


import React, {Component} from 'react';

class Item extends Component {
    render() {
        let {item,index} = this.props;
        let classNameLabel = '';
        let nameLabel = '';
        switch (item.level) {
            case 1:
                classNameLabel = 'label label-warning';
                nameLabel = 'Medium';
                break;
            case 2:
                classNameLabel = 'label label-danger';
                nameLabel = 'High';
                break;
            default:
                classNameLabel = 'label label-info';
                nameLabel = 'Low';
                break;
        }
        return(
            <tr>
                <td className="text-center">
                    {index}
                </td>
                <td>
                    {item.name}
                </td>
                <td className="text-center">
                    <span className={classNameLabel}>{nameLabel}</span>
                </td>
                <td>
                    <button type="button" className="btn btn-warning btn-sm">Edit</button>
                    <button type="button" className="btn btn-danger btn-sm">Delete</button>
                </td>
            </tr>
        )
    }
}
 
export default Item;

Nếu ngon nghẻ và suôn sẻ không thấy có lỗi gì cả ở trong tab Console thì chúng ta đã in được các dữ liệu ở trong mockdata ra ngoài thành công.

Đây là kết quả của chúng ta sau một hồi vất vả.