React render array of strings and JSX

Question

I want to render JSX like the following:

<p>
    Some text with a <span> match </span> in it
</p>

My thought is to prepare data like this:

var text = ["Some text with a", <span>match</span>, "in it"]
return <p> {text} </p>

But this leads to problems with React keeping track of iterated children lacking keys.

Each child in an array or iterator should have a unique "key" prop.

Any idea how I could solve this problem?

Edit: to give some sense for how this is used, check out the following function stub:

/**
 * prepares string with JSX span tags to assist with highlighting of search result matches 
 * @param {string} name string to find the match within
 * @param {string} matchString the search query string that we are highlighting against
 * 
 * @returns {Array} an array containing characters and JSX for syntax highlighting
 */
export const matchHighlighting = (name, matchString) => {...}

I know the search query and the response text and want to display to the user highlights -- I essentially attempted to write a function that would interpolate the contents of a string with span tags where necessary, leaving me with an array similar to the example that I posted at the top.

This react issues thread kind of highlights the problem; sounds like it's a tough one that hasn't really found a good solution?

@devserkan because I have to process the original string "Some text with a match in it" to interpolate the tags that will indicate the highlighting — Daniel Thompson
– Daniel Thompson, Commented Sep 18, 2018 at 3:28
I see. The text is coming from somewhere, you split it then grab the matched word and add a span to it, right? — devserkan
– devserkan, Commented Sep 18, 2018 at 3:35
@devserkan that's right -- I suppose the question could be rephrased "how does one interpolate a string with JSX" — Daniel Thompson
– Daniel Thompson, Commented Sep 18, 2018 at 3:37
Honestly, I have no idea right now how to do that :) But it would be better if you explain how you get the text and what are you doing right now to make it look like this. Maybe more experienced people can provide alternative solutions for this situation. — devserkan
– devserkan, Commented Sep 18, 2018 at 3:40

S.. · Accepted Answer · 2019-01-25 09:24:25Z

3

To solve the issue related to key, you need to put key attribute on each of the array elements. To do this, instead of

<p> {text} </p>

we need to iterate over the array, like this -

{text.map((el,index)=> {<p key={index}>{el}</p>})}

edited Jan 25, 2019 at 9:24

S..

5,8083 gold badges40 silver badges44 bronze badges

answered Sep 18, 2018 at 5:04

Satyaki

7512 gold badges10 silver badges26 bronze badges

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

1 Comment

Daniel Thompson Over a year ago

That makes sense. It winds up creating more JSX than I'd like to have (since it goes from being a string with tags to a bunch of tags) but it still gives the level of control I need to solve the problem. Thanks!

devserkan · Accepted Answer · 2018-09-18 12:44:48Z

I've used @sophiebit's solution here. Seems working :)

const matchHighlighting = (name, matchString) => {
  const re = new RegExp(`(\\b${matchString}+\\b)`, 'gi');
  const parts = name.split(re);
  for (var i = 1; i < parts.length; i += 2) {
    parts[i] = <span className="match" key={i}>{parts[i]}</span>;
  }
  return <div>{parts}</div>;
}

const name = "Some text with a, match in it";
const matchString = "match";

class App extends React.Component {
  render() {
    return <div>{matchHighlighting(name, matchString)}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.match {
  color: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Davit Yavryan · Accepted Answer · 2018-09-18 03:31:59Z

0

Use React Fragments (introduced in React v16.0). Here is link to documentation

<React.Fragment>Some text with a <span>match</span> in it</React.Fragment>

p.s. Also why not just put inside of ?

answered Sep 18, 2018 at 3:31

Davit Yavryan

2622 silver badges11 bronze badges

2 Comments

Daniel Thompson Over a year ago

I don't understand what you mean; isn't it inside of a p in the original question? The reason I wind up with an array of data is because that is the only way that I can figure to interpolate JSX into a string

Davit Yavryan Over a year ago

I mean you can write Some text with a match in it

Collectives™ on Stack Overflow

React render array of strings and JSX

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related