Display div only if is_active === true

The following code iterate over a variable product and displays it in a table. I want it to be that if the is_active attribute of the product is false, then it won't be displayed in the table. How can I make this happen ? Below are the code :

{products.map((product, index) => (
                    <tr key={product.id}>
                        <td>{index + 1}</td>
                        <td>{product.category ?? ""}</td>
                        <td>{product.type ?? ""}</td>
                        <td className="uppercase">{product.name}</td>
                        <td>{product.price}</td>
                        <td>
                            {product.start_date
                                ? new Date(
                                    product.start_date
                                ).toLocaleDateString("en-GB")
                                : ""}
                        </td>
                        <td>
                            {product.end_date
                                ? new Date(product.end_date).toLocaleDateString(
                                    "en-GB"
                                )
                                : ""}
                        </td>
                        <td className="uppercase">
                            {product.is_active ? "AKTIF" : "TIDAK AKTIF"}
                        </td>
                        <td className={"flex items-center space-x-6 w-10"}>
                            <Link href={route("produk.edit", product)}>
                                <PencilSquareIcon
                                    className={"h-4 w-4"}
                                    data-tooltip-id="my-tooltip"
                                    data-tooltip-content="Kemaskini"
                                />
                            </Link>

                            <button
                                onClick={() => handleDelete(product)}
                                className={"text-red-600"}
                            >
                                <TrashIcon
                                    className={"h-4 w-4"}
                                    data-tooltip-id="my-tooltip"
                                    data-tooltip-content="Hapus"
                                />
                            </button>
                        </td>
                    </tr>
                ))}

CamKem

3 years ago

Level 10

You need to conditionally render the div. It looks like you are using Blade components? The easiest way of doing this in Blade components would be to install & use alpineJS.

Follow these step to set it up.

Install alpineJS in the terminal run the command:

npm install alpinejs

in your controller add this line to the method that you want to activate the div.

session()->flash('is_active');

In your blade component wrap the entire div in the following code:

@if (session()->has('is_set'))
	<div x-data="{ show: true }" x-show="show">
		// your data here
	</div>
@endif

That should work fine.

jabrij93

3 years ago

Level 2

@CamKem Thanks for replying but i've found the answer. it's pretty simple actually, just like the following :

products.map((product, index) => {
					if (product.is_active) (
                    <tr key={product.id}>
					........)

jabrij93

3 years ago

Level 2

Solution found,

products.map((product, index) => {
					if (product.is_active) (
                    <tr key={product.id}>
					........)

Ben Taylor

3 years ago

Level 35

You should just filter it out in your database query. But if you want to do it client side, then try this:

products.filter(product => product.is_active).map((product, index)...

Please or to participate in this conversation.