Dynamic markup based on selected option

[flackeryy]

Hello. I'm wondering, is there a way how can I receive a different markup in my value, based on the option selected by the user?

I have a case where during searching, I need to fetch 3 different instances from the API, such as users, departments and roles, for example. (I really wanted to split them into 3 different <Mention> components with different triggers, and it would be easier to implement, but unfortunately it should be a single trigger @ and a single dropdown. So after search, the final dropdown looks like

---

option1 (role) option2 (role) option3 (department) option4 (department) option5 (user) option6 (user)

---

All options have id and display properties, so the single markup="@[__display__](__id__)" works well. But additionally, each option has a specific type property: user, department or role. Actually I use this type property inside renderSuggestion for styling.

But the issue that I also want to have a different markup for each option, something like this `markup="@display" so the final value looks like

"Hello @[User1](user:12345667). Department is @[Department1](department:123231231231) and role is @[Role1](role:231231)"

[Tirlipinpin]

@flackeryy Hello there, I'd like to implement the same behaviour and I'd like to know if you finally found way to do so?

[Tirlipinpin]

@flackeryy So I ended doing it in a different way. It might not be the most beautiful solution, but I decided to mutate the id property instead of depending on another property (such as the type property in your case).

For example, let's say I have your dropdown with the following values:

[
  { title: 'Department1', id: 'option1', role: 'department' },
 ...
]

Well basically I create a new array that (concretely) looks like this:

[
  { display: 'Department1', id: `${role}:${id}` },
 ...
]

This way, I can keep the markup as before (i.e: markup="@[__display__](__id__)") and have the expected result (@[Department1](department:option1)).

I hope this helps you!

[flackeryy]

@Tirlipinpin thank you for your response! Sorry I have missed your previous question. The above shared solution looks good I think. But in my case, I just forked I package and added an additional type option support :) It fits my case very well.

Just in case if you are interesting to check - https://github.com/flackeryy/react-mentions

And how it is listed in package.json - "react-mentions": "flackeryy/react-mentions",

[Tirlipinpin]

@flackeryy Looks like I missed your answer this time :) I think I'll stick to my fix for awhile (I don't really want to spend more time on this issue right now) but I'll give a look at your fork if I ever need to!