Double list when assigning axios data to useState-CodePudding

I am attempting to import data from the backend but one of my variable names is off due to naming convention. If I use setEvents(results.data.events) I get everything except for the one field. However, when I try to loop through it to assign it manually it gives me a double list that typescript is not letting me select my data from. Can someone point out how this is supposed to be done?

import { useEffect, useState } from "react";
import axios from 'axios';

type eventType = {
    id: number,
    slug: string,
    name: string,
    date: string,
    eventLevel: string,
    notes: string
}

export const Events = () => {
    const [events, setEvents] = useState<[ 
        eventType
    ]>([{
        id: 999,
        slug: '',
        name: '',
        date: '',
        eventLevel: '',
        notes: ''          
    }]);
    
    useEffect(() => {
        const getData = async () => {
            const result = await axios.get('event/', {withCredentials: true})

            setEvents(result.data.events.map((value: any, key: number) => [{
                id: key,
                slug: value.slug,
                name: value.name,
                date: value.date,
                eventLevel: value.event_level,
                notes: value.note
                }]))  // I think my issue is here but I break it if I remove the []
        }
        getData()
    }, []);

    return(
       {Object.entries(events).map(([key, value]) => (
            <div key={key} className='container'>
                <a href={'/journal/events/'   value.slug}>
                    <h2>{value.name}</h2>
                    <p><b>Date: </b>{ value.date}</p>
                    <p><b>Event Type: </b>{value.eventLevel}</p>
                    <p><b>Notes:</b></p>
                    <p>{value.notes}</p>
                </a>
                <p>key:  {key}</p>
                <p>value:  {JSON.stringify(value)}</p>
            </div>
    )
}

CodePudding user response：

I would guess that this would fix it:

setEvents(result.data.events.map((value: any, key: number) => {
 return {
    id: key,
    slug: value.slug,
    name: value.name,
    date: value.date,
    eventLevel: value.event_level,
    notes: value.note
  }
 })
)