प्रतिक्रिया एकल पंक्ति घटक

बहुत मोटे तौर पर (यानी, परीक्षण नहीं किया गया):

const Alert = ({alerts}) => {
  if ((alerts === null) || (alerts.length === 0)) { 
    return null
  }

  return alerts.map(alert => (
    <div
      key={alert.id}
      className={`alert-${alert.type}`}
    >
      {alert.msg}
    </div>
  ))
}

const Alert = ({alerts}) => {
  if (!alerts || !alerts.length) return null

  return (
    <>
      {alerts.map(alert => (
        <div key={alert.id} className={`alert-${alert.type}`}>{alert.msg}</div>
      )}
    </>
  )
}

मुझे लगता है कि आप किसके साथ संघर्ष कर रहे हैं आम तौर पर एक-लाइनर सिंटैक्स होता है, जिसे कोई ब्रेसिज़ मौजूद नहीं होने पर वापसी की आवश्यकता नहीं होती है। मेरा मतलब यह है कि यह लाइन

return alerts.map(alert => {
  return (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg} </div>)
})

इस लाइन के समान होगा

return alerts.map(alert => (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg} </div>))