Question: What I am trying to do: I want to make it so that when you click on a button with the mouse or with enter from the keyboard that you cannot click on it again afterwards. In other words, disable it after pressing the button one time.

Clicking for the second time with the mouse worked, but I can't get it to work with enter.

My code is as follows.

```
function HomeFood() {
    const [food, setFood] = useState(null);
    const [calories, setCalories] = useState('');
    const [disabled, setDisabled] = useState(false);

    async function foodData() {
        const result = await axios.get(`link`);
        console.log('DATA RESULTS:', result.data);
        setFood(result.data)
    }

    function handleChange(e) {
        setCalories(e.target.value);
    }

    function handleKeyPress(e) {
        if (e.key === 'Enter') {
            foodData()
        }
    }

    return (
        <div className="container">
            <section className='food'>
                <input
                    type='number'
                    onChange={handleChange}
                    onKeyPress={handleKeyPress}
                />
                <button
                    onClick={() => {
                        foodData();
                        setDisabled(true);
                    }}
                    disabled={disabled}
                >
                    Click here
                </button>
            </section>
            {food && <FoodNutrients mealsData={food}/>}
        </div>
    );
}

```

I tried to use the disabled state in the onKeyPress function, but only get errors. I also tried putting it in the input of the onKeyPress, but again more errors.

Answer: 
Just like the `onClick`, invoke `setDisabled` in `handleKeyPress`:

```
function handleKeyPress(e) {
    if (e.key === 'Enter') {

       if (disabled) { // do nothing if already disabled
           return;
        }

        foodData();
        setDisabled(true);
    }
}

```
Add a second disabled state, i.e. `inputDisabled` and toggle it on the same way. This allows each to disabled independently of the other.

```
function HomeFood() {
  const [food, setFood] = useState(null);
  const [calories, setCalories] = useState('');
  const [disabled, setDisabled] = useState(false);
  const [inputDisabled, setInputDisabled] = useState(false); // <-- new state

  async function foodData() {
      const result = await axios.get(`link`);
      console.log('DATA RESULTS:', result.data);
      setFood(result.data)
  }

  function handleChange(e) {
      setCalories(e.target.value);
  }

  function handleKeyPress(e) {
      if (e.key === 'Enter') {
          foodData();
          setInputDisabled(true); // <-- set input disabled
      }
  }

  return (
      <div className="container">
          <section className='food'>
              <input
                  type='number'
                  onChange={handleChange}
                  onKeyPress={handleKeyPress}
                  disabled={inputDisabled} // <-- attach disabled prop
              />
              <button
                  onClick={() => {
                      foodData();
                      setDisabled(true);
                  }}
                  disabled={disabled}
              >
                  Click here
              </button>
          </section>
          {food && <FoodNutrients mealsData={food}/>}
      </div>
  );
}

```

[![Edit mouse-click-and-enter-keyboard-disable-after-one-click-in-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/eloquent-raman-xhpsf?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark)

If you wanted them to be disabled together at the same time then just use the same `disabled` state and setter for both.