converting string to jsx component

Question

I achieved converting a piece of string into a component

function App() {
  const text = "Please make sure this is BUTTON";
  const modText = text.replace(/ /g, ", ");
  const parts = modText.split(",");
  const mapped = parts.map((part) => {
    return part.match(/BUTTON/) ? <button>{part}</button> : part;
  });
  return <div>{mapped}</div>;
}

but the output in the image looks really weird when I combine it back

I wanted it to become one sentence again something like

just one sentence not with " " every word

Use split to split a string to an array. Use join to merge an array to a string. — James
– James, Commented Sep 26, 2022 at 13:32
@0stone0 that will output Please make sure this is[object Object] — evolutionxbox
– evolutionxbox, Commented Sep 26, 2022 at 13:35

Amila Senadheera · Accepted Answer · 2022-09-26 13:47:11Z

2

You can do it like this:

function App() {
  const text = "Please make sure this is BUTTON";
  const parts = text.split(/(BUTTON)/);
  const mapped = parts.map((part,i) => i&1 ? <button key={i}>{part}</button> : part || null);
  return <div>{mapped}</div>;
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

edited Sep 26, 2022 at 13:47

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

answered Sep 26, 2022 at 13:42

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

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

4 Comments

evolutionxbox Over a year ago

Still not really sure why it's needed

Mark Dev Over a year ago

thanks @Thomas quick question though what's i&1 for?

Thomas Over a year ago

@Skkrtskrtbroom it's a condition. Assume const text = "a BUTTON and a BUTTON and a BUTTON and a BUTTON..."; all occurances of "BUTTON" will be at odd indices in parts while the strings will be at even indices! (For this regular expression. If your regex contains more than one group, the indexing will differ!)

Thomas Over a year ago

@Skkrtskrtbroom counter question, what's the part || null part for? why not just part? What's the difference?

Felipe Lima · Accepted Answer · 2022-09-26 13:33:36Z

0

You'll need to join() the array to get a string.

edited Sep 26, 2022 at 13:33

answered Sep 26, 2022 at 13:30

Felipe Lima

377 bronze badges

3 Comments

evolutionxbox Over a year ago

join() will stringify the JSX component, which is not wanted. It will output Please make sure this is[object Object]

Felipe Lima Over a year ago

And if you put in dangerousInnerHtml ?

Ritik Banger Over a year ago

This is not asked in the question.

Collectives™ on Stack Overflow

converting string to jsx component

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related