react map array of objects separately

Question

I have facing an issue in React JS. I want to show full name data separately.

Array of Object


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",..}

My Code:

   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>
        )
    }

When i run this code Result here, They both come together

 - furqan
 - 1
 - hassan
 - 3

I want to do like this but it is not working.

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

Expected Output

What should i do? Can anyone help me?

added screenshot you can check it. [@Ashish](https://stackoverflow.com/users/4976422/ashish-ranjan) — MHasan, May 06 '20 at 18:38
@MHasan The screenshot woudn't make sense, just as you have mentioned *When i run this code Result here, They both come together(and then the description)*, please also mention how you expect it be. — Ashish Ranjan, May 06 '20 at 18:39
TypeError: Cannot read property 'full_name' of undefined [@Ajeet](https://stackoverflow.com/users/2873538/ajeet-shah) — MHasan, May 06 '20 at 18:39
sorry my mistake i should update the expected output [@Ashish](https://stackoverflow.com/users/4976422/ashish-ranjan) — MHasan, May 06 '20 at 18:44
did you understand the problem ? [@Ashish](https://stackoverflow.com/users/4976422/ashish-ranjan) — MHasan, May 06 '20 at 18:47

Ashish Ranjan · Accepted Answer · 2020-05-06T19:07:38.980

0

As far as I have understood, you just want to show the full_name only from the first item.

You may do the following:

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>
    )
}

edited May 06 '20 at 19:07

answered May 06 '20 at 18:52

Ashish Ranjan

12,760
5
27
51

Thanks Bro [@Ashish](https://stackoverflow.com/users/4976422/ashish-ranjan) – MHasan May 06 '20 at 18:55
can you do it `index` dynamically? if a have multiple fullname in arrays ? please [@Ashish](https://stackoverflow.com/users/4976422/ashish-ranjan) – MHasan May 06 '20 at 19:01
@MHasan Okay, do you mean that you don't want ids to be displayed, but just the fullname of all the elements of the Array? – Ashish Ranjan May 06 '20 at 19:02
yes you right just display all `fullname` [@Ashish](https://stackoverflow.com/users/4976422/ashish-ranjan) – MHasan May 06 '20 at 19:04
@MHasan Probably the updated answer should work for you, you could also had done the same thing, just by removing the `
{item.id}
,` part and probably not returning an array from the map. – Ashish Ranjan May 06 '20 at 19:09
ok thank for your time [@Ashish](https://stackoverflow.com/users/4976422/ashish-ranjan) – MHasan May 06 '20 at 19:16

react map array of objects separately

1 Answers1