反应渲染数据数组 map

Question

I have facing an issue in react js, i use array map function to render data on component but they show last value of data.

react component

  if (this.state.data
    && this.state.data.length
    )  
    {this.state.data.map(({ full_name }, i) => (
           name = (
          <p key={i}>{this.state.data[i].full_name }</p>
        )))
 }

return ( 
<div className="row">
  {names}
</div>

show all values of data but they show last value

names data

alex
john
smith //they show last value

what should i change in my code? anyone help me?

Answer 1

Try this:

const names =
 this.state.data.length > 0 &&
 this.state.data.map(name => <p key={name}>{name}</p>);

  return ( 
    <div className="row">
      {names}
    </div>
   );

Answer 2

edited based on comment feedback below

 const names = this.state.data.map((item) => (
          <p key={item}>{item.full_name }</p>
        ))

or

 const names = this.state.data.map(({full_name}) => (
          <p key={full_name}>{full_name}</p>
        ))

here's a sandbox example
https://codesandbox.io/s/nostalgic-wood-9jrib?file=/src/App.js