Why clicking on button in React reloading page despite I have event.preventDefault in it?

Question

I am very new to React and trying to create my first project, where I created 2 buttons.
One for getting IDs, and the second for sending these IDs for getting actually items by these IDs.
Anyway clicking on the second button is reloading the page, despite that, I have event.preventDefault() in the function body **(displayCocktails)**. Any thoughts on what I am missing?

Second question, how I could pass data(return from the first function and then use un second function) between methods in React class component? I want to use IDs that I got after clicking on the first button, in (displayCocktails) function, but I don't how to pass them.
Thank you in advance!

import React from 'react'
import Form from './form/index'
import Form2 from './form2/index'
const APIkey = '1'
class App extends React.Component {
  state = {
    name: undefined
  }
  getCocktail = async (e) => {
    try {
      e.preventDefault();
      const ingredient = document.getElementById('input').value
      //https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Alcoholic
      const api_call = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${ingredient}`)
      console.log('first button')
      const data = await api_call.json()
      //https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list
      if (ingredient) {
        //console.log(data)
        // console.log(IDs)
        var cockteilsList = data.drinks.map(el => el.idDrink);
        console.log(cockteilsList)
      }
    }
    catch (error) {
      console.log(error)
    }
    return cockteilsList
  }

  displayCocktails = async (e) => {

    try {
      e.preventDefault()
      const cocktail = document.getElementById('input').value
      console.log(cocktail)
      const api_call = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${cocktail}`)
      console.log('second button')
      const data = await api_call.json()
    }
    catch (error) {
      console.log(error)
    }
  }


  render() {
    return (
      <div> App component
        <Form getCocktail={this.getCocktail} />
        <Form2 displayCocktails={this.displayCocktails} />
      </div>
    )
  }
}


export default App;


//FORMS
 
import React from 'react'
const buttonStyle = {
    display: 'block',
    backgroundColor: 'red',
    width: 140,
    heigth: 80,
    borderRadius: 15
}
const Form = (props) => (

    <div>
        Press me to get coctail's reccomendation
        <form id='form' style={buttonStyle} onSubmit={props.getCocktail}>
            <input id='input' type='text' name='cocktail' placeholder='Cocktail' />
            <button>Get a recipe </button>

        </form>

    </div>

)
export default Form;


import React from 'react'
const buttonStyle = {
    display: 'block',
    backgroundColor: 'blue',
    width: 140,
    heigth: 80,
    borderRadius: 15
}
const Form2 = (props) => (

    <div>
        Press me to get coctail's reccomendation
        <form id='form' style={buttonStyle} method="POST" action="/" onSubmit={props.displayCocktails}>
            <input id='input2' type='text' name='cocktail' placeholder='Cocktail' />
            <button type='submit'>Get a recipe </button>

        </form>

    </div>

)
export default Form2;

Answer 1

for your first question :

your displayCocktails() function probably triggering refresh since its a form, and onSubmit event will trigger refresh to the browser

you want to add to your onSubmit event in your form that function, like this and make sure your button is type:submit

<form method="POST" action="/" onSubmit={this.displayCocktails}>