ЕСЛИ внутри функции стрелки карты

Question

Почему if в этом примере заставляет мой реагирующий компонент не компилироваться.

Как можно поместить if, как это, в функцию map тогда?

{this.props.medication.map((object, i) => (
  if(object.med_type){
    <div>
      <div className="col-sm-6 col-md-6">{object.item.description}</div>
      <div className="col-sm-6 col-md-6">{(object.med_assigneddate !== '' && object.med_assigneddate !== null) ? object.med_assigneddate : 'N/A'}</div>
    </div>
  }
))}

Answer 1

Функции стрелок могут иметь в правой части символа =>:

• Блок
• оператор (который получает неявный return впередоб этом)

Если вы хотите оператор if со своим собственным блоком, вам нужно написать тело функции как блок и явно включить оператор возврата.

(object, i) => {
  if (object.med_type) {
    return (
      <div>
        <div className="col-sm-6 col-md-6">{object.item.description}</div>
        <div className="col-sm-6 col-md-6">{(object.med_assigneddate !== '' && object.med_assigneddate !== null) ? object.med_assigneddate : 'N/A'}</div>
      </div>
    );
  }
}

Answer 2

Сначала может быть лучше filter, а затем использовать map.Вы должны return что-то из map области.Для образца:

{this.props.medication.filter(object => (object.med_type)).map((object, i) => (
    return (
      <div>
        <div className="col-sm-6 col-md-6">{object.item.description}</div>
        <div className="col-sm-6 col-md-6">{(object.med_assigneddate !== '' && object.med_assigneddate !== null) ? object.med_assigneddate : 'N/A'}</div>
      </div>);
))}