0

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

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

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;

1 ответ 1

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>);
3
  • нет. не знает что такое user
    – underdog
    7 окт 2020 в 12:38
  • @underdog, проверил на реакте - он у меня на ; среагировал - скорректировал код, ошибки не выдает (исправил в свое комментарии), попробуйте еще раз
    – Zhihar
    7 окт 2020 в 12:45
  • да, сработало, спасибо
    – underdog
    7 окт 2020 в 13:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.