Прохожу курс "Основы React.js", 9 часть - "Жизненный цикл React-компонентов"(1 мин 30 сек). Вопрос следующий: имеется два компонента article и ArticleList. Первый представляет статью , а второй вывод всех статей. Стоит задача при выводе статей открыть только первую статью, автор добавляет параметр index и передает значение в параметр deafultOpen = {index === 0}и получается при загрузке страницы открывается только первая статья , остальные закрыты (Код приведу ниже). Откуда параметр index берет значение чтобы сравнить его с 0? Или каким образом работает вся эта система?
// Статья
class Article extends Component {
constructor(props){
super(props)
this.state={
modeClose: props.defaultOpen
}
}
onHandle = () => {
console.log('Clicked');
this.setState({
modeClose: !this.state.modeClose
})
}
render() {
const {article} = this.props;
const body = this.state.modeClose && <section className="card-text">{article.text}</section>;
return (
<div className="card mx-auto" style={{}}>
<div className="card-header">
<h2 className="d-inline-block">{article.title}</h2>
<button onClick={this.onHandle} className="btn btn-primary btn-lg float-right">Close</button>
</div>
<div className="card-body">
<h6 className="text-muted card-text"> creation date: {(new Date(article.date)).toDateString()}</h6>
{body}
</div>
</div>
)
}
}
//Вывод компонента ArticleList
export default function articleList({articles}){
const artcileElements = articles.map((article,index) => <li className="article-list__li" key={article.id}><Article article= {article} defaultOpen= {index=== 0} /></li> )
return <ul>
{artcileElements}
</ul>
}