Блог

С использованием Visual Studio и reactjs. Возникает эта ошибка, а также появляется сообщение о том, что выражение ожидается с значением const, и ошибка синтаксического анализа: неожиданный токен. Это выделено жирным шрифтом

Спасибо за помощь

Ошибка синтаксического анализа: неожиданный токен для запятой

 class messages extends Component {
   render(){
       const{messages} = this.props;
       return (
           <ul className="messages-list">
           {messages.map( m => this.renderMessage(m))}
           renderMessage(message) {

**const {member, text}= message;
 const {currentMember} = this.props;
 const messageFromMe = member.id === currentMember.id;
 const className = messageFromMe ?**
   "Messages-message currentMember" : "Messages-message";

 return (
   <li className={className}>
     <span
       className="avatar"
       style={{backgroundColor: member.clientData.color}}
     />
     <div className="Message-content">
       <div className="username">
         {member.clientData.username}
       </div>
       <div className="text">{text}</div>
     </div>
   </li>
 );
}

           </ul>

       )
   }
}

export default messages;
  

Вот ваш исправленный код:

 class Messages extends Component {
  renderMessage(message) {
    const { member, text } = message;
    const { currentMember } = this.props;
    const messageFromMe = member.id === currentMember.id;
    const className = messageFromMe
      ? "Messages-message currentMember"
      : "Messages-message";

    return (
      <li className={className}>
        <span
          className="avatar"
          style={{ backgroundColor: member.clientData.color }}
        />
        <div className="Message-content">
          <div className="username">{member.clientData.username}</div>
          <div className="text">{text}</div>
        </div>
      </li>
    );
  }
  render() {
    const { messages } = this.props;
    return (
      <ul className="messages-list">
        {messages.map(m => this.renderMessage(m))}
      </ul>
    );
  }
}

export default Messages;  

Вы делаете несколько вещей неправильно:

1. Имя вашего класса должно начинаться с заглавной буквы.
2. Вы вставляете функцию внутри функции визуализации, это неправильно, определите ее раньше.