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; 
