If content includes object in array then add it to new array

Question

I have a function that checks the user's content to see if it matches with any items in the array. Currently, if it matches it automatically replaces the content with a link.

What I'm wanting to do is add an extra step where it asks the user "Would you like to replace this word with a link?".

If it's a match then I'm thinking of adding that match to a new array, and then displaying the array as a card with a "Accept" or "Reject" button. If they hit accept then it will add the link to the content.

The issue I'm facing with the current setup is I can't add anything to the new array in the function, I get the error infinite loop. Any suggestions would be great!

Here's the function code

const generateContent = (content) => {
    let final;
    if(extraLink == true && word.length > 1){
      final = content.replaceAll(word, '<a class="newLink"   href=' + link + '>' + word + '</a>');
    } else {
      final = internalLinks.reduce((a, b) => {
        var reg = new RegExp('('+b.name+')', 'gi');
        return a.replaceAll(reg, '<a class="newLink"  href=' + b.link + '>' + b.name + '</a>');;
      }, content);
    }
  return final;
  };

I've tried adding but no luck

setAllLinks([...allLinks, b.name]);

UPDATE Here is the sandbox link to test how it currently functions. Instead of it automatically adding link, I want it to show a card to Accept or Reject (the base of that functions is "setAllLinks") https://codesandbox.io/s/nifty-cache-gqvoxl?file=/src/App.js

It would be easy if you can create a reproducible sample and add link, you can use codesandbox / stackblitz ... add code, save and share the link :) — KcH
– KcH, Commented Nov 17, 2022 at 7:52
I don't see how generateContent() could produce an infinite loop. Also, I guess the error is not "infinite loop", but something like too many rerenders from react? Like when you do an unconditional setValue() during the render cycle. — Thomas
– Thomas, Commented Nov 17, 2022 at 8:02
I have added a sandbox link to the file. Hope this helps explain the outcome better — Tom Galland
– Tom Galland, Commented Nov 17, 2022 at 23:00
@user16034511 I added an answer, Hope it will work as per your expectation. — Rohìt Jíndal
– Rohìt Jíndal, Commented Nov 21, 2022 at 7:49

Rohìt Jíndal · Accepted Answer · 2022-11-22 06:07:36Z

5

+50

You can simply achieve this by checking the matched words and then show the confirm dialog and based on the user action you can replace the word with a link.

Just for a demo purpose, I used default window confirm dialog but you can create your own custom dialog box and make the changes accordingly.

Update : As per the author comment, Updated the below code snippet.

One suggestion, Instead of checking the text field value on each and every keypress check it once user done with the typing. I am demoing using onBlur() event.

Live Demo :

const searchArr = [{
  word: 'Beta',
  link: 'Beta link'
}, {
  word: 'profile',
  link: 'Profile link'
}, {
  word: 'company',
  link: 'Company link'
}];

function getInputValue(e) {
  const content = e.target.value;
  document.getElementById('result').innerHTML = generateContent(content);
}

const generateContent = (content) => {
  searchArr.forEach(obj => {
    if (content.includes(obj.word)) {
      if (confirm(`Would you like to replace this word ${obj.word} with a link ?`)) {
        content = content.replaceAll(obj.word, `<a class="newLink" href=${obj.link}>${obj.word}</a>`);
      }
    }
  })
  return content;
};

Enter Text Here : <input type="text" onBlur="getInputValue(event)"/>

<div id="result"></div>

edited Nov 22, 2022 at 6:07

answered Nov 21, 2022 at 7:48

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

3 Comments

Tom Galland Over a year ago

This somewhat works but not fully. 1. Content is a text field and this function only works if I paste content into the text field. If I type it out it gives me the confirm window everytime I tap a key. 2. My question was how can I add it to a separate array, something like searchArr.push ?

Rohìt Jíndal Over a year ago

@user16034511 I updated my answer as per the requirement but my suggestion would be that instead of checking the text field value on each and every keypress, check it once user done with the typing as it will help in increasing the user experience and performance as well. I am demoing using onBlur() event. Also, no need to push the find words in a separate array.

Tom Galland Over a year ago

Thank you for the update! I've got it working from this

Collectives™ on Stack Overflow

If content includes object in array then add it to new array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related