SemanticUI/ReactJS modal not support html content

Question

I using ReactJS and SemanticUI, want to use modal but look like it's not support html inside it, right? just display plain text. well, I made a compontent for displaying modal called Alert:

<Modal
    open={this.props.open}
    size={this.props.size}
    content={this.props.content}
    actions={[
        { key: 'no', content: this.props.actions, positive: false, onClick: this.props.close }
    ]}
/>

In a page I display alert on click:

goBuy = (e) => {
    let obj = {
        size: 'tiny',
        actions: 'nope',
        click: this.goSpend,
        content: 'Are you sure?',
    }
    this.setState({
        alert: obj,
        alertOpen: true,
    })
}

It working fine, but now I want to add some html code in content like this:

content: 'Are you <b>sure</b>?',

But this not working and display html code like plain text and not make it bold. Any idea how can I solve this?

Are you <b>sure</b>?

But want this:

Are you sure?

Gimnath · Accepted Answer · 2019-12-14 21:44:45Z

3

The problem here is the Modal itself thinks the value you are passing to content is a text value so the modal displays exact same word you have provided. So instead of passing your <br> tag there, you can pass jsx as a content and render it like this.

 const content = {
       return(<p>Are you <b>sure</b></p>);
     }
goBuy = (e) => {
    let obj = {
        size: 'tiny',
        actions: 'nope',
        click: this.goSpend,
        content: {content },
    }
    this.setState({
        alert: obj,
        alertOpen: true,
    })
}

answered Dec 14, 2019 at 21:44

Gimnath

1,07614 silver badges14 bronze badges

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

Comments

Pedram · Accepted Answer · 2019-12-17 19:03:53Z

2

No need to using jsx with return just go this way:

const someHtml = (<p>Are you <b>sure</b>?</p>);

answered Dec 17, 2019 at 19:03

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

Comments

felixmosh · Accepted Answer · 2019-12-14 20:27:18Z

0

You can pass jsx as a content and render it.

answered Dec 14, 2019 at 20:27

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Collectives™ on Stack Overflow

SemanticUI/ReactJS modal not support html content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related