React - биндинг и ключи

Question

Есть два терзающий вопроса:

1. Есть кусок кода рендера

   var data = this.props.data;
       var hidden = this.state.hidden;
       var template = data.map(function(item,index) {
       return(
           <div className="mainDiv" key="{index}">
               <p className="feedText">{item.author}</p>
               <p className={'feedText ' + 'smallmargin'}>{item.text}</p>
               <p className={'feedText ' + 'smallmargin ' + (hidden ? '' : 'hidden')}>{item.bigtext}</p>
           </div>
       )
   });
   

   Реакт отказывается рендерить по причине {index} используется дважды,должен быть уникален,но значение индекса ведь разные - 0 и 1. Как быть в такой ситуации?

2. Как привязать событие? Есть событие

   divClick : function(e) {
       e.preventDefault();
       this.setState({hidden : true});
   }
   

   Банальный онклик говорит,что divClick undefined

   <div className="mainDiv" onClick={this.divClick}>
   

В чем тут проблемы?

Answer 1

По вопросу 1, это ваша опечатка:

Вы написали:

key="{index}"

Соответственно ключом становится строка. Фигурные скобки внутри строки в jsx-это просто фигурные скобки, то что внутри них не является js-выражением.

Надо:

key={index}

Ну или key = {index.toString()} если вам прямо так уж строка нужна(нет не нужна)

По вопросу 2, при правильном использовании должно работать.
Приведите весь код компонента. То есть весь кусок в котором не работает, целиком. Мой хрустальный шар предполагает, что Вы теряете контекст (this) в методе .map
Попробуйте так:

var template = data.map(function(item,index) {/** где-то здесь мы вызываем this.divClick **/}.bind(this))

Подробнее про контекст почитать можно например в ответах к этому вопросу.