Как правильно отрисовать объект в реакте?

Question

Подскажите, пожалуйста как нужно отрендерить объект с вложенными объктами, чтобы выглядело примерно так:

пробовал вот так, не сработало:

const PaymentsList = () => {

const dataOfLastSpendings = [
                {title: "Taxi", 
                 id: 1, 
                 users: [{name: 'Kate', amount: 10}, 
                         {name : 'Alex', amount: 20}]
                      }];
      

function SpendUsers() {
        return (
<div className='spendings_user '>
            {dataOfLastSpendings.map((item) => (
                <span key={item.id}>{item.dataOfLastSpendings.users.name} {item.dataOfLastSpendings.users.amount} $</span>
            ))}
        </div>
);
    }


    return (
<SpendUsers />
)
    };

export default PaymentsList;

Answer 1

так сработает?

const PaymentsList = () => {

    const dataOfLastSpendings = [
        {
            title: "Taxi", 
            id: 1, 
            users: [{name: 'Kate', amount: 10}, {name : 'Alex', amount: 20}]
         }
    ];
      

    return (
        <div className = 'spendings_user'>
        {
            dataOfLastSpendings.map(item => (
                <span key={item.id}>
                    {item.users.map(user => <>{user.name}${user.amount}</>)}
                </span>
            ))
        }
        </div>
    ); 
};

возможно, что придется key прописать - вместо

item.users.map(user => <>{user.name}${user.amount}</>);

сделать

item.users.map(user => <span key = {user.name}}>{user.name}${user.amount}</span>);

БЛОГ НА HUSL

Как правильно отрисовать объект в реакте?

Ответы (1 шт):