Атрибуты Rest API условный рендеринг и замена строки в ReactJS

#reactjs #jsx

#reactjs #jsx

Вопрос:

Я пытаюсь получить данные из rest API в react, и я успешно получаю данные, используя Axios. Атрибутами, которые я получаю из rest API, являются UniqueName, Title и DocumentType . Последним значением атрибута «DocumentType» является либо «счет-фактура», либо «заявка» .

Ну, только для последнего атрибута требуется, если значение DocumentType равно «invoice», поэтому выведите сообщение о том, что «Это счет-фактура», или, если значение равно requisition, выведите сообщение о том, что «Это заявка. Я новичок в react и не знаю, как применить условие if в методе рендеринга. Вот мой код.

 return (
  <div>
    {this.state.errorMessage amp;amp; (
      <h3 className="error">{this.state.errorMessage}</h3>
    )}
    <ul>
      {records.map((record, index) => (
        <li key={index}>
          Requisition : {record.uniqueName} - Title : {record.Title} 

          if ({record.documentType == 'requisition'}) {
                <h1>It's Requisition</h1>
              }
              else
              {
                <h1>It's Invoice</h1>
             }
        </li>
      ))}
    </ul>
  </div>
)
  

Спасибо всем 🙂

Ответ №1:

Используйте условный оператор внутри { } s:

 return (
    <div>
        {this.state.errorMessage amp;amp; (
            <h3 className="error">{this.state.errorMessage}</h3>
        )}
        <ul>
            {records.map((record, index) => (
                <li key={index}>
                    Requisition : {record.uniqueName} - Title : {record.Title}
                    {
                        record.documentType == 'requisition'
                            ? <h1>It's Requisition</h1>
                            : <h1>It's Invoice</h1>
                    }
                </li>
            ))}
        </ul>
    </div>
)
  

Комментарии:

1. У меня нет слов, чтобы поблагодарить вас. Это работает. Спасибо, чувак.