React passing link to reusable component

Question

I am using a reusable component in React, to which a pass mostly text and some props. One of the texts needs to have a linked word, but I do not know how to pass that link inside a string.Any idea how to pass a string with links in it? Thanks!

This is how I am passing text and props to my reusable VertragsCheckSlide component. My question refers to prop "parag1", there is where I need to add the link with an info-Icon. I tried passing it it is usually works, but I get an [Object, Object] as output.

                        <VertragsCheckSlide
                                title="Ist meine Rentenversicherung zu teuer?"
                                parag1={`Die Kosten von privaten Rentenversicherungen sind sehr 
                                intransparent und höchst unterschiedlich. Mit der gesetzlich 
                                vorgeschriebenen Effektivkostenquote ${(
                                    <TipIcon
                                        size="lg"
                                        tooltipText={ToolTips[0]}
                                    />
                                )} kann man sie aber gut vergleichen.`}
                                parag2="Bei klassischen Anbietern (zumeist Versicherungen) liegt die 
                                Effektivkostenquote oft bei 2 % oder sogar höher. Bei myPension 
                                beträgt sie nur ca. 0,8 %."
                                parag3="Hohe Kosten mindern den Ertrag und damit dein zukünftiges 
                                Guthaben zur Verrentung. Wie viel das ausmachen kann, zeigt dir die 
                                nebenstehende Grafik."
                                buttonText="Weitermachen"
                                graphicImage={graphicImage4}
                                dropDown
                                renderSelect={this.renderSelect}
                                dropTitle="Wo finde ich die Effektivkostenquote in meinem bestehenden 
                                Vertrag?"
                                dropText="Jeder Anbieter einer privaten Rentenversicherung ist 
                                verpflichtet, die Effektivkosten anzugeben. Man findet sie im 
                                sogenannten Produktinformationsblatt. Suche einfach nach den 
                                Begriffen „Informationsblatt“, „Effektivkosten“ oder „Kosten“ und 
                                schon hast du deine Kosten im Blick. Probiere auch unseren 
                                Nettovergleichsrechner aus!
                                Hilfe nötig? Du kannst uns anrufen oder uns gleich deinen Vertrag per 
                                E-Mail senden. Wir melden uns schnellstmöglich bei dir."
                                handleClick={this.next}
                                activeSlide={activeSlide}
                            />

Thanks for the help!

Answer 1

It perfectly worked passing the prop like this:

                               <VertragsCheckSlide
                                 parag1={<div>
                                        Die Kosten von privaten
                                        Rentenversicherungen sind sehr
                                        intransparent und höchst
                                        unterschiedlich. Mit der gesetzlich
                                        vorgeschriebenen Effektivkostenquote
                                        <TipIcon
                                            size="lg"
                                            tooltipText={ToolTips[0]}

                                        />
                                        kann man sie aber gut vergleichen.
                                        </div> 
                                        } />

No need off setting any dangerouslySetInnerHTML on Render.

Thanks for the tips!

Answer 2

you can try pass a string like a html object:

<div>
   <div> your text in here </div>
   <a href={your link} />
</div>

and in component render text can using:

 <span>
  dangerouslySetInnerHTML={{ __html: content transmisson in }}
  </span>

that is this way how to render papper in html