CODEWITHSUNDEEP
reactjs
Ky Lane
Ky Lane

Reputation: 338

Replace part of a string with an imported component

We are presenting dynamic error messages which are listed in a locale file as a const. As a part of that string, I am placing text [Alert] which I would like to replace with an imported alert component (which displays a nice alert etc).

How do I go about replacing part of a string in a const with a react component?

Upvotes: 0

Views: 90

Answers (1)

Lafi
Lafi

Reputation: 1342

@KyLane , what about rendering the alert JSX inside the message Component as below ?

const renderAlert = () => (
  <h1>this is an alert Component</h1>
)

const AlertMessage = ({ renderAlert }) => (
  <div>
    <p>This is a message<br/>
      {renderAlert()}<br/>
      End of the message
    </p>
  </div>
);

this is a link to codesandbox so you could try it.

Upvotes: 1

Related Questions