Помогите с функцией map в Reactjs

165

08 декабря 2018, 04:50

у меня есть состояние в нём хранится десять объектов у которых есть атрибут текст подскажите как вывести с помощью функции мап в эти тексты от 10 объектов

render(){
return (
    <ul>
      {this.state.Posts.map((Posts, i) => (<li key={Posts[i].id}  >{Posts[i].text}</li>) )}
      <br/>
    </ul>
)
};

это не работает выводит только текст первого объекта,заранее спасибо

Answer 1

Вы не правильно используете map, просто получайте аргументом текущий элемент и возвращайте модифицированный:

Запустить на Codepen

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      Posts: [
        {
          id: 1,
          text: 'Hi'
        },
        {
          id: 2,
          text: 'Bye'
        }
      ]
    }
  }
  render () {
    return (
      <div class="app">
        <ul>
          {this.state.Posts.map(post => <li key={post.id}>{post.text}</li>)}
          <br/>
        </ul>
      </div>
    );
  }
}
ReactDOM.render(
    <App />,
  document.getElementById('root')
);