CODEWITHSUNDEEP
reactjs
Nimrod
Nimrod

Reputation: 389

Invoking a Component through onClick method in ReactJS

So what I'm trying to do is to invoke a Component by an onClick event of a button in React.

The component I'm trying to invoke is the CommentForm and I've passed it as a method in the onClick method, but the component is not getting invoked and I'm unable to proceed further, some help is greatly appreciated.

Below is the code snippet.

import CommentForm from './CommentForm'

. . .

const DishDetail=(props)=>{
        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">
                    <div className="col-12 col-md-5 m-1">
                        <RenderDish dish={props.dish} />
                    </div>
                    <div className="col-12 col-md-5 m-1">
                        <RenderComments comments={props.comments} />
                        <div className="row m-1">
                            <Button type="submit" value="submit" onClick={()=>CommentForm}><i className="fa fa-pencil"></i> Submit Comment</Button> // <-- component invoked here
                        </div>
                    </div>
                </div>
            </div>
        );

}

Upvotes: 1

Views: 84

Answers (2)

GBourke
GBourke

Reputation: 1963

A component is not "invoked", it needs to be "Rendered" as JSX within a return method of a parent component.

in your case, you can use method called "conditional rendering".

create state in your component called showCommentForm. When this state is true, the comment form will be rendered. When its false, the comment form will not be rendered.

const [showCommentForm, setShowCommentForm] = useState(false);

update your button to toggle the state

 <Button type="submit" value="submit" onClick={()=> setShowCommentForm(prevState => !prevState}><i className="fa fa-pencil"></i> Submit Comment</Button> /

now conditionally render your component by returning it as JSX with its props (I have made up commentFormProps here, not sure what you need)

{showCommentForm && <CommentForm {...commentFormProps } />}

Im not exactly sure of your styling and such, but you will end up with something like this

const DishDetail=(props)=>{
    const [showCommentForm, setShowCommentForm] = useState(false); //<-- state to conditionally render your commentForm. the button mutates showCommentForm (toggles it) through setShowCommentForm

    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">
                <div className="col-12 col-md-5 m-1">
                    <RenderDish dish={props.dish} />
                </div>
                <div className="col-12 col-md-5 m-1">
                    <RenderComments comments={props.comments} />
                    <div className="row m-1">
                            <Button type="submit" value="submit" onClick={()=> setShowCommentForm(prevState => !prevState}><i className="fa fa-pencil"></i> Submit Comment</Button> /
                           {showCommentForm && <CommentForm {...commentFormProps } />} //<-- will only return the CommentForm (or render it) when showCommentForm is true
                    </div>
                </div>
            </div>
        </div>
    );

}

Upvotes: 1

Tarukami
Tarukami

Reputation: 1160

If you want to hide or show your component you should create a state containing the current visibility like this:

const Menu = () => {
  return <h3>Hi I am the menu</h3>
}
const App = () => {
  const [isMenuVisible, setIsMenuVisible] = useState(false)
  function handleClick() {
    setIsMenuVisible(!isMenuVisible)
  }
  
  return (
    <>
      <button onClick={handleClick} >{isMenuVisible ? "Hide menu" : "Show menu"}</button>
      {isMenuVisible && <Menu />}
    </>
    )
}

so your onClick event must change the state like 'isVisible'. The rest will be done by React itself.

Upvotes: 0

Related Questions