Hola, tengo un componente que no devuelve nada. Estoy siguiendo un tutorial y la persona está usando una sintaxis más nueva que me confunde un poco. El componente se ve así:

const Alert = ({alerts}) => alerts !== null && alerts.length > 0 && alerts.map(alert => (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg}</div>));

Simplemente quiero saber cómo escribir esto sin que sea una sola línea. Entonces puedo ver lo que está pasando. Muy apreciado de antemano. Por lo que sé, siempre debes devolver algo.

0
Kevin.a 29 oct. 2019 a las 18:53

4 respuestas

La mejor respuesta
const Alert = ({ alerts }) => {
  if (alerts !== null && alerts.length > 0) {
    return alerts.map(alert => (
      <div key={alert.id} className={`alert-${alert.type}`}>
        {alert.msg}
      </div>
    ));
  }
  return null
};

Las cosas en juego aquí son:

  1. Funciones de flecha
  2. Array.Map
  3. JSX
  4. Literales de plantilla

Básicamente es un componente que toma una propiedad alerts (matriz) como accesorio (<Alert alerts={[...]} />). Comprueba si la matriz pasada está presente y no está vacía y luego la asigna. Para cada elemento de la matriz, presentamos un div que contiene el mensaje de alerta.

¡Espero que esto ayude!

2
Ajay Gupta 29 oct. 2019 a las 16:05

Muy aproximadamente (es decir, no probado):

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>
  ))
}
2
Dave Newton 29 oct. 2019 a las 15:59

Creo que con lo que estás luchando es generalmente la sintaxis de una línea, que no necesita un retorno si no hay llaves presentes. Lo que quiero decir es que esta línea

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

Sería la misma que esta línea

return alerts.map(alert => (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg} </div>))
1
Konstantin 29 oct. 2019 a las 16:09
const Alert = ({alerts}) => {
  if (!alerts || !alerts.length) return null

  return (
    <>
      {alerts.map(alert => (
        <div key={alert.id} className={`alert-${alert.type}`}>{alert.msg}</div>
      )}
    </>
  )
}
1
Matt Sugden 29 oct. 2019 a las 15:59