Имеется код:
const STATbJI = [
{
id: 1,
textName: 'breaking news1',
text:'lorem ipsum1',
},
{
id: 2,
textName: 'breaking news2',
text:'lorem ipsum2'
},
{
id: 3,
textName: 'breaking news3',
text:'lorem ipsum3'
},
{
id: 4,
textName: 'breaking news4',
text:'lorem ipsum4'
},
{
id: 5,
textName: 'breaking news5',
text:'lorem ipsum5'
},
{
id: 6,
textName: 'breaking news6',
text:'lorem ipsum6'
},
{
id: 7,
textName: 'breaking news7',
text:'lorem ipsum7'
},
{
id: 8,
textName: 'breaking news8',
text:'lorem ipsum8'
},
{
id: 9,
textName: 'breaking news9',
text:'lorem ipsum9'
},
{
id: 10,
textName: 'breaking news10',
text:'lorem ipsum10'
}
];
const News = React.createClass({
getInitialState() {
return {
isShow: true
};
},
render() {
const { name, text } = this.props;
const {isShow} = this.state;
return (
<div className="col">
{ isShow ?
(<div className="card">
<h2>{name}</h2>
<p>{text}</p>
</div>)
: null}
</div>
);
}
});
const NewsList = React.createClass({
getInitialState() {
return {
novosti: STATbJI
}
},
addnews(){
this.setState ({
isShow: !this.state.isShow,
});
console.log('click')
},
render() {
const { novosti } = this.state;
return (
<div>
<div className="list">
{
novosti.map(novostb => (
<News
key={novostb.id}
name={novostb.textName}
text={novostb.text}
/>
))
}
<button className="addnews" onClick={this.addnews}>Добавить ещё новостb</button>
</div>
</div>
);
}
});
ReactDOM.render(
<NewsList />,
document.getElementById('app')
);
Прошу тапками сильно не пинать) возможно вопрос ооочень глупый) Только недавно, относительно "правильно" начал изучать React.
Задача. На начальном экране должно отображаться две новости и по нажатию на кнопку добавлять ещё по две новости.
Застрял на моменте что бы хоть просто менять всем элементам состояние. Не понимаю почему по нажатию на кнопку у элементов оно не меняется. Как это исправить?
Где ошибки? и как это можно более лучше реализовать?
Есть ли возможность в самом массиве указать состояние? Или более верно через
getInitialState
??
Спасибо
state
уNewsList
должен храниться массив отображаемых новостей. В таком случае не будет необходимости вisShow
вNews
(который, кстати, у вас никак не меняется, аisShow
изNewsList
на него никак не влияет), а вsetState
при нажатии на кнопку достаточно будет обновлять список новостейnovosti
,novostb
и особенноSTATbJI
- это плохие названия переменных