Question 72890 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How do I use multiple handlers with one onClick? – Reactjs

I am trying to call two handlers, but only one of the handlers executes:

import React, { useState } from 'react';
import classes from './Buy.module.css';
import HouseList from './HouseList';
import './style.css';

const Buy = () => {
  const [noOfCards, setNoOfCard] = useState(4);
  const [loadMore, setLoadMore] = useState('visible');

  const visibleHandler = () => {
    setNoOfCard((prevValue) => prevValue + 3);
  };

  const loadMoreHandler = () => {
    if (noOfCards === HouseList.length) {
      setLoadMore('inVisible');
    } else {
      setLoadMore('visible');
    }
    visibleHandler();
  };

  return (
    <div className={classes.container}>
      <div className={classes.secondContainer}>
        <li className={classes.listingTitle}>Current Listings</li>
        <div className={classes.thirdContainer}>
          {HouseList.slice(0, noOfCards).map((houseL) => {
            return (
              <div
                key={houseL.id}
                className={classes.cardContainer}
                // onChange={loadMoreHandler}
              >
                <div className={classes.card}>
                  <img
                    src={houseL.image}
                    alt=''
                    className={classes.cardImage}
                  />
                  <button className={classes.cardButton}>House</button>
                  <br />
                </div>
              </div>
            );
          })}
        </div>
        <button onClick={loadMoreHandler} className={loadMore}>
          Load More
        </button>
      </div>
    </div>
  );
};

export default Buy;

and this is the style.css file:

.visible {
  background-color: red;
}

.inVisible {
  visibility: hidden;
  display: none;
}

Instead of calling visibleHandler inside loadMoreHandler, I’ve even tried calling both the functions onClick like so:

<button onClick={()=>{loadMoreHandler(); visibleHandler();}} className={loadMore}>

but it did not work.

How do I make the loadMoreHandler work once noOfCards equals to 11?

I tried calling my first handler function into my second one. I was expecting the loadmore button to disappear once the noOfCards’s length reaches 11, which is the full length of my schema, HouseList. It works when I change the default value of noOfCards to 11 from 4, but that is not how I expected it to work.

Tags:

2

Answers


  1. 0

    You can call two handlers in the form:

    onClick={
 () => {
  handleA();
  handleB();
  }
}

    as you stated.

    If that doesn’t work, likely another part of your code is performing in an unexpected way. Keep it mind state changes in handleA will not be reflected in the execution context of handleB.

    Login or Signup to reply.
  2. 0

    i think you just forgot something in className inside button,

    try adding classes like this:

    <button onClick={()=>{loadMoreHandler(); visibleHandler();}} className={classes.`${loadMore}`}>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search