Parameterizing event handlers in React

Question

I am using https://github.com/olahol/react-tagsinput library to create tags in my application. Very weird things are happening when I try to bind renderTag property to a custom function. I think I am missing a point related to JavaScript, not react.

Even though the typeof tagType returns 'string' on component, when I try to render that, it renders [object Object] | hello. Why does it render Object?

  defaultRenderTag = (customProps, props) => {
let { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props
let { tagType } = customProps;

// This returns 'string'
console.log(typeof tagType)

return (
  <span key={key} {...other}>
    {/* The type of the tag: */}
    {
      tagType ? (
        // This returns "[object Object] | work"

        <span className="react-tagsinput-tagtype"> {tagType} </span> + ' | '
      ) : null
    }
    {getTagDisplayValue(tag)}
    {!disabled &&
      <a className={classNameRemove} onClick={(e) => onRemove(key)} />
    }
  </span>
)

}

This is the main component that I use the function above:

 <TagsInput
      ...
      renderTag={this.defaultRenderTag.bind(this, { tagType: 'personal' })}
      ...
 />

I don't get it. I am trying to render tagType 'personal' in JSX. — Uğur Kaya
– Uğur Kaya, Commented Jul 22, 2018 at 18:35
Oh my god @Colin! I've just seen what you mean. Thanks a lot! — Uğur Kaya
– Uğur Kaya, Commented Jul 22, 2018 at 18:55

Swati Anand · Accepted Answer · 2018-07-22 18:42:21Z

2

Since you are using string concatenation in JSX <span className="react-tagsinput-tagtype"> {tagType} </span> + ' | ', the <span>...</span> prints as [Object object]. You can try the below alternative:

return (
  <span key={key} {...other}>
    {
      tagType && <span className="react-tagsinput-tagtype"> {`${tagType} | `} </span>
    }
    {getTagDisplayValue(tag)}
    {!disabled &&
      <a className={classNameRemove} onClick={(e) => onRemove(key)} />
    }
  </span>
)

answered Jul 22, 2018 at 18:42

Swati Anand

8996 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Uğur Kaya Over a year ago

Thanks @colin and swati for the answer!

Collectives™ on Stack Overflow

Parameterizing event handlers in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related