React, how to dynamically create components inside a string?

Question

I know how to dynamically create react components based on lists, as the docs indicate. However, I want to create them dynamically but not together, with some strings in between. Specifically, I want to contain every regex in some custom components.

For example:

The cat is playing with the dog and the mouse

becomes

The <animal>cat</animal> is playing with the <animal>dog</animal> and the <animal>mouse</animal>

I know how to do the regex, but just adding the tags to the string would have them be still strings, instead of components.

do you have any code of what you've tried?

Japsz
– Japsz

2020-02-24 00:50:20 +00:00
Commented Feb 24, 2020 at 0:50 — Japsz
– Japsz, Commented Feb 24, 2020 at 0:50

lissitz · Accepted Answer · 2020-02-24 01:10:14Z

2

Return an array of strings and React components

import React from "react";

export default function App() {
  return (
    <div>
      {"The cat is playing with the dog and the mouse"
        .split(/(cat|dog|mouse)/)
        .map((x, i) => (i % 2 ? <Animal>{x}</Animal> : x))}
    </div>
  );
}

function Animal({ children }) {
  return <span style={{ color: "red" }}>{children}</span>;
}

https://codesandbox.io/s/nice-browser-950gx

answered Feb 24, 2020 at 1:10

lissitz

5463 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

React, how to dynamically create components inside a string?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related