Conditonal rendering REACT modal component

Question

I have a view modal component (ViewModal.js)

import React from 'react'
import { Button, Modal } from 'react-bootstrap';
import './Modal.css';

class ViewModal extends React.Component {

    constructor() {
        super();
        this.state = {
        }
    }

    handleModalShowHide() {
        this.setState({ showHide: !this.state.showHide })
    }

    render() {
        return (
            <div>
                <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>

                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                        <Modal.Title>Add your review</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        ModalBody
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="outline-secondary" onClick={() => this.handleModalShowHide()}>
                            Close
                    </Button>
                        <Button variant="outline-success" onClick={() => this.handleModalShowHide()}>
                            Save Review
                    </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        )
    }

}

export default ViewModal;

I import this in another functional component called viewcard.js The logic of viewcard.js is as follows

import React from 'react';
import ViewModal from './ViewModal';
import Card from 'Card';

function handleClick(){
    console.log('in handle');
 }
const viewcard = () => {
    return ( 
        <p onClick={() => handleClick()}/>
         Some text in paragraph
        </p>
     );
}

export default viewcard;

The Card component displays some text on the screen. What I am trying to achieve is when a user clicks on that text, I want to show the modal.

Currently If I render the modal inside viewcard, by calling it, It will show a button based on this line of logic

                <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>

I want to remove the button and have the same behaviour happen when the user clicks on the text in viewcard.js

Answer 1

ViewCard component:-

import React, {useState} from 'react';
import ViewModal from './ViewModal';
import Card from 'Card';

const ViewCard = () => {
    const [showModal, setShowModal] = useState(false);

    function handleClick(){
       setShowModal(!showModal)
    }

    return ( 
        <Card onClick={() => handleClick()}/>
        {showModal && <ViewModal hideBtn={true} showModal={true} />}
     );
}

export default ViewCard;

ViewModal Component:

import React from 'react'
import { Button, Modal } from 'react-bootstrap';
import './Modal.css';

class ViewModal extends React.Component {

    constructor() {
        super();
        this.state = {
           showHide: this.props.showModal ? true : false
        }
    }

    handleModalShowHide() {
        this.setState({ showHide: !this.state.showHide })
    }

    render() {
        return (
            <div>
                {this.props.hideBtn ? null : <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>}

                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                        <Modal.Title>Add your review</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        ModalBody
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="outline-secondary" onClick={() => this.handleModalShowHide()}>
                            Close
                    </Button>
                        <Button variant="outline-success" onClick={() => this.handleModalShowHide()}>
                            Save Review
                    </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        )
    }

}

export default ViewModal;

But you should always create a separate modal component.