Quartz 🪬

Passing Data to a JSX Element

3 min read

Primitive Data Types

Truyền các dữ liệu thuộc kiểu primitive vào JSX element như sau:

// String
const name = "Aleister"
 
// Number
const currentYear = new Date().getFullYear()
const bornYear = 2002
const age = currentYear - bornYear
 
const header = (
  <header>
    <h1>My name is {name}</h1>
    <p>I am {age} years old</p>
  </header>
)

Info

Các giá trị boolean sẽ không được render.

Arrays

Đối với mảng, ta cần phải cho các phần tử trong mảng vào một element nào đó, chẳng hạn như thẻ <li>:

// Array
const skills = ["HTML", "CSS", "JS", "React"]
const formattedSkills = skills.map((skill) => <li>{skill}</li>)
 
const skillList = (
  <div>
    <p>My skills:</p>
    <ul>{formattedSkills}</ul>
  </div>
)

Khi render các JSX element từ một mảng, ta sẽ thấy một cảnh báo như sau:

Warning: Each child in a list should have a unique "key" prop

Ta cần thêm thuộc tính key vào thẻ <li> với giá trị có thể là chuỗi hoặc số và cần phải là unique.

Việc sử dụng key giúp React giám sát được từng phần tử trong một danh sách có bị thay đổi, thêm hoặc xóa hay không, đặc biệt là khi mảng dữ liệu bị thay đổi (xem thêm Keys).

Ví dụ, ta có thể dùng index của mảng để làm key cho element:

const formattedSkills = skills.map((skill, index) => <li key={index}>{skill}</li>)

Tuy nhiên, việc dùng index làm key hoặc tạo key trong khi render là không được khuyến khích (xem thêm Why not to Use Index as Key in React Lists).

Objects

Chúng ta không thể truyền trực tiếp một object vào JSX element. Thay vào đó, chỉ có thể truyền vào các thuộc tính.

// Object
const person = {
  name: "Aleister",
  age: 21,
  skills: ["HTML", "CSS", "JS", "React"],
}
 
const header = (
  <header>
    <h1>My name is {person.name}</h1>
    <p>I am {person.age} years old</p>
    <p>My skills: </p>
    <ul>
      {person.skills.map((skill, index) => (
        <li key={index}>{skill}</li>
      ))}
    </ul>
  </header>
)

Media Objects

Để có thể truyền ảnh, audio hoặc video clip vào JSX element, ta cần import chúng dưới dạng một object.

Giả sử có một file ảnh tên là avatar.jpg ở trong thư mục /src/images, ta import file ảnh này dưới dạng một object như sau:

import avatar from "/src/images/avatar.jpg"

Sau đó, truyền đối tượng ảnh đã được import vào làm giá trị của thuộc tính src trong thẻ <img>:

const image = <img src={avatar} alt="Avatar"></img>

Resources