How to access deeply nested array in Javascript

Question

I have to access data from an API that is similar to:

{
 "name": "nameofevent",
 "speakers": [
   {
     "name": "speakerName"
   }
 ]
}

I am not sure how to access the speakerName inside speakers. Below is what I have, but I don't think I can do it that way because the speaker name has the same variable name as name. How would I access the speakerName?

{publicEvents.map((event) => {
    const { name, speakers: [{name}]} = event;
    return (
        <EventsCard
            eventName={name}
            speakerName={name}
        />
    ); 
})}

Answer 1

As James said, it is an array so you need to specify that item in the array, since it is possible to have multiple speakers. Something like this could be used to select the first item:

speakers[0].name