2

I'm trying to render the React-Semantic UI Message and based on the condition I need to display Content or list based on the condition.

Working code: 

const Message = ({icon, header, content, className, list}) => {
if(Array.isArray(content))
{
    return (
    <SemanticMessage
        icon={icon}
        header={header}
        className={className}
        list={content}
    />
    )
} else {
    return (
    <SemanticMessage
        icon={icon}
        header={header}
        className={className}
        content={content}
    />
    )
}
}

But this is not working:

const Message = ({icon, header, content, className, list}) => {
 return (
     <Message
         icon={icon}
         header={header}
         className={className}
         {...Array.isArray(content) ? [list={content}] : [content={content}]}
     />
 )

}

any leads? what I am missing here?

Dhanapal
  • 350
  • 2
  • 7
  • 29

2 Answers2

2

You need to slightly modify the spread to spread an object with key/value pairs as opposed to spreading an array. These are known as spread attributes in JSX:

const Message = ({icon, header, content, className, list}) => {
 return (
     <Message
         icon={icon}
         header={header}
         className={className}
         {...Array.isArray(content) ? { list: content } : { content } }
     />
 )
}
Christian Santos
  • 5,386
  • 1
  • 18
  • 24
0

Content property is missing.

return (
     <Message
        // this content prop missing in your code
         content={...Array.isArray(content) ? [list={content}] : [content={content}]}
     />
 )
James Delaney
  • 1,765
  • 1
  • 17
  • 36