How to properly display an array of objects that can contain an array?

Question

React

I have arrays like this:

const qualities = {
    tedious: { _id: "67rdca3eeb7f6fgeed471198", name: "Нудила", color: "primary" },
    strange: { _id: "67rdca3eeb7f6fgeed471100", name: "Странный", color: "secondary" },
    buller: { _id: "67rdca3eeb7f6fgeed4711012", name: "Троль", color: "success" },
    alcoholic: { _id: "67rdca3eeb7f6fgeed471101", name: "Алкоголик", color: "danger" },
    handsome: { _id: "67rdca3eeb7f6fgeed471102", name: "Красавчик", color: "info" },
    uncertain: { _id: "67rdca3eeb7f6fgeed471103", name: "Неуверенный", color: "dark" },

}

const users = [
    {
        _id: "67rdca3eeb7f6fgeed471815",
        name: "Джон Дориан",
        profession: professions.doctor,
        qualities: [qualities.tedious, qualities.uncertain, qualities.strange],
        completedMeetings: 36,
        rate: 2.5
    },
    {
        _id: "67rdca3eeb7f6fgeed471816",
        name: "Кокс",
        profession: professions.doctor,
        qualities: [qualities.buller, qualities.handsome, qualities.alcoholic],
        completedMeetings: 15,
        rate: 2.5
    }

I am trying to output them to a table like this

let res = users.map((item) => {
       return <tr key={item._id}> <td>{item.name}</td><td>{item.profession}</td><td>{item.qualities.name}</td><td>{item.completedMeetings}</td><td>{item.rate}</td></tr>
     })
     console.log('res', res)
    return <>
        <table className="table-danger">
            <thead>
                <tr>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                    {res}
            </tbody>
            </table>
            </>

But where I have an array in the object, it turns out either empty or 1 value. I can't figure out how to draw the right conclusion

Answer 1

Instead of item.qualities.name you need this:
item.qualities.map(q => q.name).join(', ')