Clever Geek Handbook

How to pass a React component as a prop

I am using the change-semantic-ui mod object. The object that opens the modal is the prop.

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

I want to add Modal to 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 do I pass JSX ( <Button>Text</Button>

) code as a render prop as a modal prop?

+3


source to share


1 answer


You can easily follow these steps

<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 do it like below

render () {
    return (
        <div>
            // some code can go here
            { this.props.trigger }
        </div>
    );
}
+5


source






More articles:


All Articles