JS. React. JSX проблемы
Всем привет!
Имеем 3 файла: App.js; post-list.js; post-list-item.
В файле post-list-item я прописал переменную PostListItem.
В файле post-list.js я создал переменную PostList и вложил список из переменной PostListItem - 3 шт.
В App.js я прописал PostList.
Проблема в том, что в браузере список из 3 шт. PostListItem отображается только 1 раз. Хотя по задумке должен все 3 раза.
Но если в App.js прописать PostList - 3 раза, то в браузере все 3 раза он появится.
Как сделать так, чтобы не прописывать в App.js 3 раза PostList, а отделаться только 1 разом?
PostListItem
import React from 'react';
const PostListItem = () => {
return (
<li className="app-list-item d-flex justify-content-between">
<span className="app-list-item-label">
Lady Gaga Paul Walker
</span>
<div className="d-flex justify-content-center align-items-center">
<button className="btn-star btn-sm">
<i className="fa fa-star"></i>
</button>
<button className="btn-trash btn-sm">
<i className="fa fa-trash-o"></i>
</button>
<i className="fa fa-heart"></i>
</div>
</li>
)
}
export default PostListItem;
PostList
import React from 'react';
import PostListItem from '../post-list-item';
const PostList = () => {
return (
<ul className="app-list list-group">
<PostListItem/>
<PostListItem/>
<PostListItem/>
</ul>
)
}
export default PostListItem;
import React from 'react';
import AppHeader from '../app-header';
import SearchPanel from '../search-panel';
import PostStatusFilter from '../post-status-filter';
import PostList from '../post-list';
const App = () => {
return (
<div className="app">
<AppHeader/>
<div className="search-panel d-flex">
<SearchPanel/>
<PostStatusFilter/>
</div>
<PostList/>
</div>
)
}
export default App;
Ответы (2 шт):
Если я правильно понял вопрос, то можно вывести PostListItem в цикле:
const PostList = () => {
return (
<ul className="app-list list-group">
{[1, 2, 3].map(() => <PostListItem/>)}
</ul>
)
}
Я дебил.
В PostList я на экспорт кидаю PostListItem, а должен PostList, вот поэтому в браузере список только 1 раз появлялся.