How to render an element?

Question

JavaScript

The simplest task that can be: an array of objects comes from the backend, you need to render them.
[{}, .... {}]

async function fetchData() {
        try {
            const result = await axios
                .get("http://localhost:8000/directories");
        
            console.log(result.data);
            
            setDirectories(result.data);
        }
        catch(error) {
            console.error(error);
        }
    }

{
                    directories && directories.map((directory, index) => {
                        <Directory
                            key={ index }
                            label={ directory.name }
                        />
                    })
                }

I receive data (at least I see it in the console), but how can I go through each object and its attribute and render it? What am I missing?

Answer 1

First, don't do key={ index }, if the data is updated on the server, it will be a problem to update it on the front.
Second, please provide the setDirectories() function code