Button not rendering in 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;

Gabriele Petrioli · Accepted Answer · 2022-09-08 08:23:23Z

3

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 ?

answered Sep 8, 2022 at 8:23

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faize Ertürk · Accepted Answer · 2022-09-08 09:01:39Z

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.

edited Sep 8, 2022 at 9:01

answered Sep 8, 2022 at 8:42

Faize Ertürk

214 bronze badges

1 Comment

Muhammad Junaid Over a year ago

Thanks for the help. "bootstrap-react" is actually an alias for the latest version of reactstrap. I'm actually using 2 versions of reactstrap.

Nice Books · Accepted Answer · 2022-09-08 08:51:34Z

1

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

answered Sep 8, 2022 at 8:51

Nice Books

1,8812 gold badges19 silver badges21 bronze badges

Collectives™ on Stack Overflow

Button not rendering in React.js

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related