Challenge 1 / 1

Our project has a little widget that shows the number of active users:

<body>
    <div id="active-users-count">{{ activeUsersTotal }} active</div>
    <!-- other code -->
</body>

How can we create a Turbo Stream that will update the number of active users?

<turbo-stream action="replace" target="active-users-count">
    <template>
        {{ activeUsersTotal }} active
    </template>
</turbo-stream>

<turbo-stream action="update" target="active-users-count">
    <template>
        <div id="active-users-count">{{ activeUsersTotal }} active</div>
    </template>
</turbo-stream>

<turbo-stream action="replace" target="active-users-count">
    <template>
        <div id="active-users-count">{{ activeUsersTotal }} active</div>
    </template>
</turbo-stream>

<turbo-stream action="replace" target="active-users-count">
    <div id="active-users-count">{{ activeUsersTotal }} active</div>
</turbo-stream>

Rewatch the video