javascript - React single line component - Stack Overflow

Hello I have a ponent which doesnt return anything. Im following a tutorial and the person is using newer syntax which confuses me a bit. The ponent looks like this:

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

I simply want to know how to write this without it being single line. So i can see what's going on. Much appreciated in advance. For as far as i am aware you always need to return something.

Hello I have a ponent which doesnt return anything. Im following a tutorial and the person is using newer syntax which confuses me a bit. The ponent looks like this:

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

I simply want to know how to write this without it being single line. So i can see what's going on. Much appreciated in advance. For as far as i am aware you always need to return something.

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Oct 29, 2019 at 16:00 Emile Bergeron 17.4k55 gold badges8585 silver badges132132 bronze badges asked Oct 29, 2019 at 15:53 Kevin.aKevin.a 4,3261515 gold badges5151 silver badges9292 bronze badges 3

• Put line breaks in? Or break up the logic into reasonable chunks (essentially a guard clause) and if it gets past that return the alert mapping? What's the specific issue? – Dave Newton Commented Oct 29, 2019 at 15:57
• This does return something. It basically checks if any alerts exists. If so, it returns a div(s) containing the alert message(s). – silencedogood Commented Oct 29, 2019 at 15:57
• 2 Follow another tutorial, dont seem like instructor is doing any good by using one liner to its readers/students – Rikin Commented Oct 29, 2019 at 15:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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
};

Things at play here are:

1. Arrow Functions
2. Array.Map
3. JSX
4. Template Literals

Basically its a ponent that takes in an alerts property (Array) as a prop (<Alert alerts={[...]} />). It checks whether the passed array is present and is not empty and then maps over it. For every item in the array, we are rendering a div containing the alert message.

Hope this helps!

Very roughly (i.e., untested):

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>
      )}
    </>
  )
}

I think what you are struggling with is generally the one-liner syntax, which doesn't need a return if there are no braces present. What I mean is that this line

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

Would be the same as this line

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