How to define a variable of exported type in React?

I have defined a custom structure in a separate file:

//status.js

export const status = [
    {
        id:0,
        label:"In progress",
    },
    {
        id:1,
        label:"Escalated",
    },    
    {
        id:0,
        label:"Suspended",
    },
]

I want to use it for another structure:

//ticket.js

import { status } from "../utils/structures/status"

export const ticket = [
    {
        id:0,
        status:{status}
    }
]

I need "tickets" variable to have multiple objects inside, each having it’s own "status" property with their own value (e.g. status[0] = {id:0,l abel:"In progress"} so I can address each "ticket" and filter/display it’s status. In my definition, the "status" property contains all 3 objects from the imported structure. If I try to address the "status" structure’s elements (e.g. id:0, status:{status[0]}) this defenition is incorrect ("," expected)

How to define this structure properly?

>Solution :

You need to assign a specific status to each ticket, not the entire array. You can reference the status by its index directly in your ticket objects. Here’s how you should define it:

// status.js
export const status = [
    {
        id: 0,
        label: "In progress",
    },
    {
        id: 1,
        label: "Escalated",
    },
    {
        id: 2,
        label: "Suspended",
    },
];

// ticket.js
import { status } from "../utils/structures/status";

export const tickets = [
    {
        id: 0,
        status: status[0],  // In progress
    },
    {
        id: 1,
        status: status[1],  // Escalated
    },
    {
        id: 2,
        status: status[2],  // Suspended
    },
];

I have also fixed the id values in your status array to be unique. Your initial definition had duplicate id values which makes no sense. Each status should have a unique ID if you’re going to reference them meaningfully.