How to return Form from onClick listener?

I have the react-app with onClick Button. The simply version of one of it’s components looks like this:

export const Filters= props=>{
return(
          </div>
           <button 
           onClick={AddReview()}>
            Add review
          </button>
    </div>
    )
  }

And the component with event hendler is here:

export default function AddReview() {
        return (
         <div className="filter" style={{ margin: "300 px"}}>
              <h2>Board</h2>
              <Form>
             <FormGroup>
            <Label for="player">Player</Label>
            <Input name="player" placeholder="Ex: Player 1"></Input>
          </FormGroup>
          </Form>
        </div> 
        );
      }

So my task is to return Form from the event handler onClick, but I faced with the warning:

“Expected onClick listener to be a function, instead got a value of object type”

How can I avoid this problem? Thank you!

Answer

An event handler is a void function that cannot return anything. You want to add a state to your component that tells you whether or not to show the AddReview component.

const [isAddingReview, setIsAddingReview] = useState(false);

In your event handler, you update this state.

onClick={() => setIsAddingReview(true)}

Then you conditionally render the AddReview component only when isAddingReview is true.

Here I am showing an “Add Review” button when it’s false and the AddReview component when it’s true. Likely there are callback functions that you want to pass to AddReview as props. For example, we can pass a function to close the form which you might call inside AddReview when the form is submitted.

export const Filters = () => {
  const [isAddingReview, setIsAddingReview] = useState(false);

  return(
    <div>
      {isAddingReview
      ? // when true
      <AddReview
        close={() => setIsAddingReview(false)}
      />
      : // when false
      <button 
        onClick={() => setIsAddingReview(true)}
      >
         Add review
      </button>
      }
    </div>
  )
}