Is there a method of disabling a button in ReactJS after a certain number of clicks?

I'm relatively new to React and I was working on a button that duplicates a component I created when clicked, but I want to limit the user to only be allowed to click on said button a set number of times (say 4 times) before the button is non-functional/removed. Here's a code snippet if it helps; is this possible? I thought about having a counter, but how would I implement that alongside the button?

Many thanks!

function App() {    const [inputList, setInputList] = useState([]);      const onAddBtnClick = event => {      setInputList(inputList.concat(<Autocomplete items={foods} />));    };      return (      <Fragment>        <div className="foodcompleter">          <Button onClick={onAddBtnClick} variant="primary" size="lg" block>Add Food</Button>           {inputList}        </div>      </Fragment>    );  }  

https://stackoverflow.com/questions/66937161/is-there-a-method-of-disabling-a-button-in-reactjs-after-a-certain-number-of-cli April 04, 2021 at 09:00AM