Как правильно отобразить список ошибок под моим компонентом?

Question

Я использую React 16.13.0 и Bootstrap 4. Я хочу отобразить список ошибок поля, когда в моем компоненте заполнена правильная переменная. У меня есть это

  {props.errors && props.errors[props.name] && (
      <FormControl.Feedback>
             {props.errors[props.name].map((error, index) => ( 
                 <div key={field-error-${props.name}-${index}} className="fieldError">{error}</div>
             )}  
      </FormControl.Feedback>
  )}

Однако это не скомпилируется

  Line 20:45:  Parsing error: Unexpected token, expected "}"

  18 |           <FormControl.Feedback>
  19 |                  {props.errors[props.name].map((error, index) => (
> 20 |                      <div key={field-error-${props.name}-${index}} className="fieldError">{error}</div>
     |                                             ^
  21 |                  )} 
  22 |           </FormControl.Feedback>
  23 |       )}

Я не уверен, что я делаю неправильно - есть ли другой способ ссылаться на мой props.name var

Answer 1

Я думаю, что вам не хватает кавычек:

key={`field-error-${props.name}-${index}`}