Курс по React JS / Урок #10 - Множественные дочерние компоненты

В этом уроке мы изучим множественные дочерние компоненты. Это позволит нам контролировать все наши объекты по уникальному ключу и удалять их или же изменять в любое время, без потери связи между ними.

✔ -------------

- Уроки от #GoshaDudar 👨🏼‍💻
- Все уроки по хештегу #GoshaReactJS

[pbkoxuj]

Ребят если не нашли новый код вот он:

class Filed extends React.Component{
constructor(props){
super(props)
this.state = {
tasks:[
'MacDonalds',
'KFC',
'Burger King']
}
}

render(){
return(
<div className = 'filed'>
{
this.state.tasks.map(function(item, i){
return(<App key = {i}>{item}</App>)
})
}
</div>
)
}
}
const app =
ReactDOM.render(<Filed/>, app)

[thevladsirotkin]

Можно заменить это:
{
this.state.tasks.map (function (item, i) {
return (<Task key={i}>{item}</Task>);
})
}
на это:
{
this.state.tasks.map ((item, i) => <Task key={i}>{item}</Task>)
}

[hnsojjb]

голос супер у вас, Георгий а что вы думаете о play framework на scala?

[yaroslavkazakov]

Гоша, key это же специальный технический атрибут для реакта. Его невозможно будет в последствии считать. Причем все key у компонентов на странице должны быть разными. А если ты, к примеру, создаешь ещё несколько компонентов, как ты добавишь к ним такие ключи, чтобы они отличались друг от друга? А при совпадени ключей, отобразится только компонент с первым совпадением ключа.

[andriipanasiuk]

можешь накидать литературы, мб каналов на ютубе или еще каких-либо источников по реакту? Очень нужно изучить данную библиотеку

[kchicnx]

Гоша, у тебя на канале так много видео уроков, что задается мысль, как хорошо ты знаешь все эти языки?

[MaxI-fwvv]

А как получается, что "i" меняется, то есть, как туда значение подставляется? спасибо)

[Serhii]

всем привет. у меня не работает этот код с этого видео((( var Task = React.createClass({
getInitialState:function(){
return {edit: false}
},
edit:function() {
this.setState ({edit: true})
},

remove:function() {
alert("нажата кнопка Удалить");
},
save:function() {
var value = this.refs.newTxt.value;
alert(value);
this.setState ({edit: false})
},

rendNorm: function () {
return (
<div className="box">
<div className="text"> {this.props.children} </div>
<button onClick={this.edit} className="btn light"> Редактировать</button>
<button onClick={this.remove} className="btn red"> Удалить</button>
</div>
);
},

rendEdit: function() {
return (
<div className="box">
<textarea ref="newTxt"
<button onClick={this.save} className="btn success"> Сохранить</button>
</div>
);
},
render: function () {
if (this.state.edit) {
return this.rendEdit ();
} else {
return this.rendNorm ();
}
}
});

var field = React.createClass ({
getInitialState: function () {
return {
tasks: [
'необходимо',
'слово',
'отдыхать'
]
}
},
render: function () {
return (
<div className="field">
{
this.state.tasks.map (function (item, i) {
return (<Task> {item} </Task>);
})

}
</div>
)
}
});
const app =
ReactDOM.render (<Field />, app);

[maLik]

То чувство когда ты изначально так и сделал))