If you’ve done Exercise 1 and want more practice, here are some data items and starter JSX for displaying the data items. You can do Exercise 1 again, but this time with a component for the new piece of data. You can also do the later exercises with the new piece of data and the component you created to display it.

Notifications

One notification:

const instagramNotification = {
    _id: 0,
    app: "Instagram",
    message: "3 people liked your post",
    time: "10 min ago"
}

A list of notifications:

const notifications = [
    {

        _id: 0,
        app: "Instagram",
        message: "3 people liked your post",
        time: "10m"
    },
    {
        _id: 1,
        app: "Text Message",
        message: "I'll be there in 5 minutes",
        time: "3m"
    },
    {

        _id: 2,
        app: "Pixels",
        message: "How was your day today?",
        time: "1h"
    }
]

Starter JSX for one notification:

<div className="alert alert-primary">
    <h5>APP HERE <span className="small fw-light">TIME HERE</span></h5>
    MESSAGE HERE
</div>

Tasks

One task:

const doLaundry = {
    _id: 0,
    title: "Do Laundry",
    completed: true
}

A list of tasks:

const tasks = [
    {
        _id: 0,
        title: "Do Laundry",
        completed: true
    },
    {
        _id: 1,
        title: "Do Dishes",
        completed: false
    },
    {
        _id: 2,
        title: "Pay Taxes",
        completed: false
    },
    {
        _id: 3,
        title: "Clean Bathroom",
        completed: true
    },
    {
        _id: 4,
        title: "Grocery Shopping",
        completed: false
    }
]

Starter JSX for one task:

<div className="mb-3">
    <input type="checkbox" className="form-check-input me-3" type="checkbox" checked={COMPLETED HERE}/>
    TITLE HERE
</div>

Note

In JSX you can set whether or not a checkbox is checked with the checked attribute.

For example, this will be checked checkbox:

<input type="checkbox" checked={true} />

This will be an unchecked checkbox:

<input type="checkbox" checked={false} />

Uploads in Progress

One upload in progress:

const firstUpload = {
    _id: 0,
    fileName: "styles.css",
    progress: 43
}

A list of uploads in progress:

const uploads = [
    {
        _id: 0,
        fileName: "styles.css",
        progress: 43
    },
    {
        _id: 1,
        fileName: "index.html",
        progress: 98
    },
]

Starter JSX for one upload in progress:

<div className="mb-4">
    <p className="mb-1">FILE NAME HERE</p>
    <div className="progress">
        <div class="progress-bar bg-success" 
            role="progressbar" style={{ width: PROGRESS HERE + "%" }} >
                PROGRESS HERE%
        </div>
    </div>
</div>

Note

We can set the width of an element in JSX using the style attribute. Set the style attribute to an object with properties for the CSS properties you want to set.

For example, this will set the width to 20%:

<div style={{ width: "20%" }}></div>

Keep Practicing

Come up with your own data and make your own simple JSX to display it!