0

Say I have a JS file that contains a dictionary (an Object full of key: value pairs) and is exported to a JSX file.

How can I create a function that gets a string and returns a span with every word that exists both in the dictionary's keys and the string converted into a tooltip with the matching value as its content embedded with the rest of the non-tooltipped text (like Wikipedia, for reference)?

I've found this tooltip library from react-mui, so creating the tooltip itself is not the problem, but only creating the function to convert all the occurrences automatically.

Below is the function that gets the key (name) and value (explanation) and converts them to a Tooltip:

function defToToolTip(name, explanation) {
  return <DictionaryTooltip title={explanation}>{name}</DictionaryTooltip>;
}

I've tried to create a function that gets a string and embeds tooltips wherever a word from the dictionary appears but got stuck very early.
I need help thinking about how to make sure all the words in the string that are also in the dictionary are converted using the function above.

Nitzan Daloomy
  • 166
  • 5
  • 24
  • Please add any relevant code (input, attempt at writing the code, expected output) to your question as a [mcve]. You can use the snippet tool `[<>]` in the question edit toolbar to help you. – Andy May 12 '23 at 20:10
  • @Andy Added some code and explainings, thanks – Nitzan Daloomy May 12 '23 at 20:19
  • Does this answer your question? [Replace part of string with tag in JSX](https://stackoverflow.com/questions/30474506/replace-part-of-string-with-tag-in-jsx) – adsy May 12 '23 at 20:53
  • @adsy if I had one value in my dictionary it could, but the newer solutions aren't working or can't be used with multiple values to replace. – Nitzan Daloomy May 12 '23 at 21:39

0 Answers0