按钮未在 React.js 中呈现

Question

I am trying to render a Button in React.js that would pop up a modal which reads "Submit Comment". However, the page turns up blank when i add the CommentForm component inside the RenderComments function. It works fine when I add a HTML component like "p" but doesnt work for CommentForm and "Button". Please help. I'm new to React.

   import React, {Component} from "react";
   import { Link } from "react-router-dom";
   import { Modal, ModalHeader, ModalBody } from "bootstrap-react";
   import { Button } from  'react';
   import { Card, CardImg, CardText, CardBody, CardTitle, Breadcrumb, 
   BreadcrumbItem } from "reactstrap";

   class CommentForm extends Component {

    constructor(props) {
    super(props);

    this.toggleModal = this.toggleModal.bind(this);

    this.state = {
        isModalOpen: false
    };

    
    
}

toggleModal() {
    this.setState({
        isModalOpen: !this.state.isModalOpen
    })
}

handleSubmitComment(values) {

}

render() {
    return (
         <div>
            <Button outline onClick={this.toggleModal}>
                <span className="fa fa-pen fa-lg">Submit Comment</span>
            </Button>

            <Modal isOpen={this.state.isModalOpen}  toggle={this.toggleModal}>
                <ModalHeader toggle={this.toggleModal}>Submit Comment</ModalHeader>
                <ModalBody>

                </ModalBody>
            </Modal>
         </div>
    );
}

  }


    function RenderDish({dish}) {

 if (dish != null) {
    return (
        <div className='col-12 col-md-5 m-1'>
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle> {dish.name}</CardTitle>
                    <CardText> {dish.description} </CardText>
                </CardBody>
            </Card>
        </div>   
    );
}
else {
    return (
        <div></div>
    );
}
    }

    



    function RenderComments({comments}){
if (comments != null) 
    return (
        <div className='col-12 col-md-5 m-1'>
            <h4> Comments </h4>
            <ul className='list-unstyled'>
                {comments.map(comment => {
                    return (
                        <li key={comment.id}>
                        <p>{comment.comment}</p>
                        <p>-- {comment.author},
                        &nbsp;
                        {new Intl.DateTimeFormat('en-US', {
                            year: 'numeric',
                            month: 'long',
                            day: '2-digit'
                        }).format(new Date(comment.date))}
                        </p>
                        </li>
                    );
                })}
            </ul>
            <CommentForm />
        </div>
    );
    else
        return ( <div></div>);
    }


    const DishDetail = (props) => {

console.log('DishDetail Component render is invoked')

console.log(props.dish);
console.log(props.comments);

if (props.dish != null) 
    return (
        <div className="container">
            <div className='row'>
                <Breadcrumb>
                    <BreadcrumbItem><Link to='/menu'>Menu</Link></BreadcrumbItem>
                    <BreadcrumbItem active>{props.dish.name}</BreadcrumbItem>
                </Breadcrumb>
                <div className="col-12">
                    <h3>{props.dish.name}</h3>
                    <hr />
                </div>
            </div>
            <div className="row">
                <RenderDish dish={props.dish} />
                <RenderComments comments={props.comments} />
            </div>
        </div>
    );      
else
    return(
        <div></div>
    );
    }



    export default DishDetail; 

Answer 1

I do not believe that React exposes a Button component, which you seem to try to use in import { Button } from 'react';

Should that Button be coming from the reactstrap package as well?

Answer 2

instead of this:

import { Button } from 'react';

You should use import { Button } from 'react-bootstrap'
or import { Button } from 'reactstrap' pick which library is your prefer.

Also I don't think bootstrap-react is true (also there is one but not used commonly). for this line of your code import { Modal, ModalHeader, ModalBody } from "bootstrap-react"; I belive it should be import { Modal, ModalHeader, ModalBody } from "reactstrap"; because all these u called(Modal, ModalHeader, ModalBody) perfectly match with reactstrap.

Answer 3

In addition to @FaizErturk's answer, in toggleModal the callback argument of setState should be used:

this.setState((state)=>({
    isModalOpen: !state.isModalOpen
}));

This prevents stale state values from being used to update.
See https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Answer 4

Put something in the < ModalContent >, and try to use more React hooks syntax, it is way cleaner and easier to debug etc. My advice is to don't use DEFAULT export in any case of using components, because it will lead in some hidden import bugs.