score:2

Accepted answer

you can't just import a component and then call a method on it, because you aren't actually rendering it anywhere.

what you need to do is render the component, and then if you want to control the state of one component from another you need to "lift state up" and pass the state and any methods needed to the modal component as props. something like this:

modal component

import react, { component } from 'react'
import modal from 'react-bootstrap/modal'
import button from "components/button/button"

export class basemodal extends component {

    render() {
        if (!this.props.show) {
            return null;
        };
        return (
            <>
                <modal show={this.state.show}>
                    <modal.header closebutton>
                        <modal.title>modal heading</modal.title>
                    </modal.header>
                    <modal.body>woohoo, you're reading this text in a modal!</modal.body>
                    <modal.footer>
                        <button variant="secondary" onclick={this.props.togglemodal}>
                            close
                        </button>
                        <button variant="primary" onclick={this.props.togglemodal}>
                            save changes
                        </button>
                    </modal.footer>
                </modal>
            </>
        )
    }
}

button docs

import react, { component } from 'react'
import button from "components/button/button"
import basemodal from "components/modals/basemodal"

export class buttondocs extends component {

constructor(props) {
        super(props);
        this.state = { show: false };
    }

    togglemodal() {
        this.setstate({ show: !this.state.show })
    }

    render() {
        <button value="open modal" onclick={this.togglemodal} />
        <basemodal show={this.state.show} togglemodal={this.togglemodal} />
    }
}

Related Query

More Query from same tag