CODEWITHSUNDEEP
reactjsreact-bootstrap
jtylerm
jtylerm

Reputation: 472

Having trouble getting ReactBootstrap contained modal to work

Here's the github link to my code https://github.com/jtylerm/Section9Lecture36

I am following along with a course from Udemy, we're writing a Pokedex site. 

Warning: Failed prop type: Invalid prop `container` supplied to `Modal`.
in Modal (at PokemonModal.js:15)
in PokemonModal (at App.js:91)
in div (at App.js:70)
in App (at index.js:10)

I don't understand how 'container' is an invalid prop since that code was copied directly from the ReactBootstrap website https://react-bootstrap.github.io/components.html

Please help. Thanks!

***** UPDATE *****

Turns out you can either delete the prop 'container' entirely OR change the component from stateless to stateful, as Manolo suggests below. Hope this helps anyone with a similar error as what I had above.

Upvotes: 1

Views: 414

Answers (1)

Manolo Santos
Manolo Santos

Reputation: 1913

You are using this inside a functional react component. In this context this === window. You should define your PokemonModal extending React.Component or React.PureComponent.

const PokemonModal = ({toggleModal, showModal, pokemon}) => {
    return(
        <div>        
            {/* ... */}

            <Modal
                show={showModal}
                onHide={toggleModal}
                container={this}
                aria-labelledby="contained-modal-title"
            >
                {/* ... */}
            </Modal>
        </div>
    )
}

Upvotes: 1

Related Questions