#How to make button work with an onClick and Enter Key?

19 messages · Page 1 of 1 (latest)

fickle fulcrum
#

Hi folks! I know this is pretty simple but I can't figure it out, and I've tried doing what this article says but it didn't work.
https://reactgo.com/react-trigger-button-click/
This is my repo: https://github.com/andicuevasp/culinarian
Thanks in advance!!

Reactgo
How to trigger a button click on Enter in React

In this tutorial, we are going to learn about triggering the button click by pressing an enter key in a box using react. Consider we have a…

GitHub
GitHub - andicuevasp/culinarian

Contribute to andicuevasp/culinarian development by creating an account on GitHub.

hardy ledge
tall wave
#

You have several form's.

#

You don't do that

#

You have 1 form

#

And 1 onSubmit on the form not the button

pulsar holly
#

As Barry stated, you are using form for each of your ingredients.
You shouldn't do that, it overcomplicates your form.

You should have 1 form with multiple inputs, then a button with a submit type. You can then attach a submit handler to the form, gather all your data from the submit event inside that handler, validate the data and send it to the API etc...

If you have a button with submit type and you are inside a form you can press enter as long as you are focused on any elements inside the form and that will submit the form. Since this is a button you can also click on the button which will submit the form.

That way you don't need to attach multiple handlers unnecessary to a button.

fickle fulcrum
# hardy ledge When you tried doing what the article says, how exactly did you do it? I'm askin...

Hi Daniel! This is what I did:

async function getRecipes() {
const res = await fetch(
https://api.spoonacular.com/recipes/complexSearch?apiKey=${import.meta.env.VITE_CULINARIAN_APP_API_KEY}&includeIngredients=${ formData.firstIngredient },${formData.secondIngredient},${formData.thirdIngredient}&number=10&addRecipeInformation=true
);
const data = await res.json();
console.log(data)
setRecipeData(data.results);
setBeginSearch(true);
}

function handleKeypress(e) {
if (e.keyCode === 13) {
getRecipes();
}
}
and then passed handleKepress as a prop to ingredientsForm...

Reading @pulsar holly's answer, I see that I didn't do this form correctly at all! I never really learned forms properly so that's why I struggle wit this! Going back and doing what Bence mentioned 🙂

fickle fulcrum
fickle fulcrum
#

@pulsar holly Ok so I corrected my form and now have the following:

<form className='ingredients'> <h3>Ingredient 1</h3> <input className='ingredient-input' type='text' placeholder='' name='firstIngredient' onChange={props.handleChange} value={props.formData.firstIngredient} /> <h3>Ingredient 2</h3> <input className='ingredient-input' type='text' placeholder='' name='secondIngredient' onChange={props.handleChange} value={props.formData.secondIngredient} /> <h3>Ingredient 3</h3> <input className='ingredient-input' type='text' placeholder='' name='thirdIngredient' onChange={props.handleChange} value={props.formData.thirdIngredient} /> <button type='submit'>Let's cook!</button> </form>

I put my async getRecipes function inside the handleChange because I thought it would work, but whenever I start to type the first input, it already goes and fetches the API 😧 what am I doing wrong? This is what the handleChange now looks like:

`function handleChange(e) {

setFormData((prevFormData) => {
  return {
    ...prevFormData,
    [e.target.name]: e.target.value,
  };
});

async function getRecipes() {
  const res = await fetch(
    `https://api.spoonacular.com/recipes/complexSearch?apiKey=${import.meta.env.VITE_CULINARIAN_APP_API_KEY}&includeIngredients=${
      formData.firstIngredient
    },${formData.secondIngredient},${formData.thirdIngredient}&number=10&addRecipeInformation=true`
  );
  const data = await res.json();
  console.log(data)
  setRecipeData(data.results);
  setBeginSearch(true);
}

getRecipes()
}`

fickle fulcrum
pulsar holly
pulsar holly
fickle fulcrum
tall wave
#

seems somewhat fine

#

im not a big fan of the

  const recipeElement = props.recipeData.map((recipe) => {
    return (
        <li key={recipe.title}>
          <a href={recipe.sourceUrl} target='_blank'>
            <img src={recipe.image} />
            <h4>{recipe.title}</h4>
          </a>
        </li>
    );
  });

thing here

#

but i cba finding out if it's the same problem as making components inside components

hardy ledge
pulsar holly