9

I'm using react-semantic-ui Modal object. The object that opens the modal is a prop.

 <Modal
       trigger=<Button>Text</Button>
       otherProp=...
   >
  </Modal>

I want to embed Modal in another component:

export default class Confirm extends Component {

    render() {
        return (
            <Modal
                trigger={this.props.trigger} /* here */
              >    
                <Modal.Content>
                    ...
                </Modal.Content>
                <Modal.Actions>
                    ...
                </Modal.Actions>
            </Modal>
        )
    }
}

How can I pass JSX code ( <Button>Text</Button> ) as a prop to be render as a Modal prop?

Oleksandr Fediashov
  • 4,315
  • 1
  • 24
  • 42
znat
  • 13,144
  • 17
  • 71
  • 106
  • Does this answer your question? [How to pass in a react component into another react component to transclude the first component's content?](https://stackoverflow.com/questions/25797048/how-to-pass-in-a-react-component-into-another-react-component-to-transclude-the) – Michael Freidgeim May 01 '20 at 13:47

1 Answers1

21

You can easily do following

<Modal trigger={ <Button>Text</Button> }> 
   // content goes here 
</Modal>

and inside Modal, you can access it via this.props.trigger which will be your button component and you can render it like below

render () {
    return (
        <div>
            // some code can go here
            { this.props.trigger }
        </div>
    );
}
Aren Hovsepyan
  • 1,947
  • 2
  • 17
  • 45
  • 1
    Thanks. My question is how can I render `this.props.trigger` in the Modal tag definition. I want to pass `` as a prop – znat Apr 11 '17 at 11:52
  • Hi @znat, I have answered already ;), you can print it in `Modal` like any other string prop or variable. `{ this.props.trigger }` in your `render` method – Aren Hovsepyan Apr 11 '17 at 14:04
  • 1
    I think there's a misunderstanding: I need something like that: // content goes here But this doesn't work – znat Apr 11 '17 at 15:03