Unable to print javascript variable text in html inside a react component

Question

I'm learning a backend administrative dashboard framework callled admin bro. So basically i am trying to make a tooltip component. And this is the code I have tried till now.

class Textbox extends React.PureComponent {
 

render() {
    const { property } = this.props;
    
    const ob = this.props.property.name
    const sentence = { 
        first : ' this is the first text ',
        second : ' this is second text',
        third: 'this is third text',
        fourth : 'this is the fourth text',
    }

    
    var line = sentence[ob]
       
    return (
        <script type="text/javascript">
            document.write(line)
        </script>
    )
  }
}

export default withTheme(Textbox)

In this ob has the values like first,second, third and fourth, so when it is sentence[ob] it means for example sentence[first] (when ob is first) so line then gets the corresponding text to it which is 'this is the first text'. I have consoled logged line and seen that this part is working perfectly.

Now I just have to display line inside the html code inside return.

I have tried to implement document.write() from this - how to display a javascript var in html body

But this doesn't work. What can I do?

Answer 1

The return method should always have one html parent tag (div in my example). This element can have as many children as you like, but can't have any siblings.

Then you can execute javascript statements by wrapping them in curly braces like so {javascript goes here}

So your code should be

return(
  <div>{line}</div>
)