реагировать на массив объектов отдельно

Question

У меня проблема в React JS. Я хочу показать данные с полным именем отдельно.

Массив объектов

0: {id: "1", wp_user_id: null, facebook_id: null, group_id: null, full_name: "furqan", …}
1: {id: "3", wp_user_id: null, facebook_id: null, group_id: null, full_name: "hassan",..}

Мой код:

   this.state = {
        cusomterdata:[],      
      }
    }

    render() {  
        return (
            <div>
                {this.state.cusomterdata.map(function(item, i){
              return ([
                        <p key={i}>{item.full_name}</p>,
                        <p key={i}>{item.id}</p>,
                    ]);
                })}
            <div>
        )
    }

Когда я запускаю этот код Результат здесь, они оба приходят вместе

 - furqan
 - 1
 - hassan
 - 3

Я хочу сделать вот так, но это не работает.

     <p key={i}>{item.full_name[0]}</p>,   //just show first fullname

Ожидаемый результат

Что мне делать? Кто-нибудь может мне помочь?

Answer 1

Насколько я понял, вы просто хотите показать full_name только из первого элемента.

Вы можете сделать следующее:

render() {

    let FullName = null;
    if (this.state.cusomterdata) {
        FullName = (
            {
                this.state.cusomterdata.map((data, index) => {
                    return (
                        <p key={index}>{data.full_name}</p>
                    )
                })
            }
        )
    }

    return (
        <div>
            { FullName }
        </div>
    )
}