Условный рендеринг в ReactJS между кнопкой и обычным текстом

Question

У меня есть один массив объектов, скажем defect, и теперь, если статус дефекта открыт, он должен отображаться как кнопка, и он должен показывать закрытие дефекта, а если он закрыт, то вместо этого он должен просто упомянуть какзакрыто.Итак, здесь statusRender является проблемой и теперь работает, как и ожидалось, в последнем столбце.Не могу понять, чего мне не хватает.Есть ли отведения?

render() {

  if (defect.defect_status == 'open') {
    statusRender = <button key={index} data-id={defect.id} onClick={() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button>;
  } else {
    statusRender = { defect.defect_status };
  }
  return (
    <div>
      <table className="table table-bordered table-hover">
        <thead>
          <tr>
            <th>Defect ID</th>
            <th>Category</th>
            <th>Description</th>
            <th>Priority</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {this.state.defectList.map((defect, index) => {
            return (
              <tr key={index}>
                <td> {defect.defect_id}  </td>
                <td>{defect.defect_category}</td>
                <td>{defect.defect_description}</td>
                <td>{defect.defect_priority}</td>
                <td> {statusRender}
                </td>
              </tr>
            );
          })
          }
        </tbody>
      </table>
    </div>
  )
}

Answer 1

Если вам просто нужен доступ к строке состояния вместо кнопки, может быть, вам следует убрать скобки в вашем операторе if else

render() {

   if(defect.defect_status=='open') {
  statusRender = <button key={index} data-id={defect.id} onClick = {() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button>;
} else {
  // No brackets here ? 
  statusRender = defect.defect_status;
}
      return (
        <div>
        <table className="table table-bordered table-hover">
           <thead>
            <tr>
              <th>Defect ID</th>
              <th>Category</th>
              <th>Description</th>
              <th>Priority</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
        {this.state.defectList.map((defect,index) =>{
         return(
         <tr key={index}>   
        <td> {defect.defect_id}  </td>
        <td>{defect.defect_category}</td>
        <td>{ defect.defect_description}</td>
        <td>{ defect.defect_priority}</td>
        <td> {statusRender}
          </td>    
       </tr>
         );      
        })
}
</tbody>
     </table>
          </div>
          )


  }
}

Answer 2

Благодаря user1095118 удаление двоеточий сделало свою работу.Мне не хватало правильности фигурных скобок, которые решили проблему

{ 
          defect.defect_status == 'open' 
           ?<button key={index} data-id={defect.id} onClick = {() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button> : defect.defect_status
        }

Answer 3

это проблема области, которую вы не можете объявить дефектом вне функции карты

{this.state.defectList.map((defect,index) => {
 return (
    <tr key={index}>   
      <td> {defect.defect_id}  </td>
      <td>{defect.defect_category}</td>
      <td>{ defect.defect_description}</td>
      <td>{ defect.defect_priority}</td>
      <td> 
        { 
          defect.defect_status === 'open' 
           ? <button key={index} data-id={defect.id} onClick = {() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button>;
           : defect.defect_status;
        }
      </td>    
    </tr>
   );      
 })
}