React Hooks, useState: Conditional in handleSubmit is being ignored

Question

I have a function which takes the input from the form and runs the some method on the Array prototype, and I am then changing state in the isInAPI && wasAPICallMade (i've inserted the data in a code snippet) essentially if I should be getting something either way as the wasAPICallMade state is getting updated, but it's not.

What am I doing wrong?

indgredients[{
      id: 1,
      name: 'Hemp Protein'
    }, {
      id: 2,
      name: 'Avocado'
    }, {
      id: 3,
      name: 'Organic Maca'
    }, {
      id: 4,
      name: 'Organic Kale'
    }, {
      id: 5,
      name: 'Organic Coconut Water'
    }, {
      id: 6,
      name: 'Astragalus'
    }, {
      id: 7,
      name: 'Rhodiola'
    }, {
      id: 8,
      name: 'Other Spices'
    }, {
      id: 9,
      name: 'Green Coffee Beans'
    }, {
      id: 10,
      name: 'Organic Peach'
    }, {
      id: 11,
      name: 'Organic Seabuckthorn'
    }, {
      id: 12,
      name: 'Hijiki Seaweed'
    }, {
      id: 13,
      name: 'Organic Turmeric'
    }, {
      id: 14,
      name: 'Organic Ginger'
    }, {
      id: 15,
      name: 'Lime Juice'
    }, {
      id: 16,
      name: 'Bell Pepper'
    }, {
      id: 17,
      name: 'Organic Spinach'
    }, {
      id: 18,
      name: 'Organic Flax Seeds'
    }, {
      id: 19,
      name: 'Organic Goji Berry'
    }, {
      id: 20,
      name: 'Organic Chlorella'
    }, {
      id: 21,
      name: 'Organic Nutmeg'
    }, {
      id: 22,
      name: 'Kale'
    }, {
      id: 23,
      name: 'Tomato2'
    }, {
      id: 24,
      name: 'Organic Cucumber'
    }, {
      id: 25,
      name: 'Tamari'
    }, {
      id: 26,
      name: 'Organic Cacao'
    }, {
      id: 27,
      name: 'Chaga Mushroom'
    }, {
      id: 28,
      name: 'Raw Cashew'
    }, {
      id: 29,
      name: 'Lemon'
    }, {
      id: 30,
      name: 'Organic Cold Brew Coffee'
    }, {
      id: 31,
      name: 'Organic Sweet Cherry'
    }, {
      id: 32,
      name: 'Japanese Matcha Green Tea'
    }, {
      id: 33,
      name: 'Pink Himalayan Sea Salt'
    }, {
      id: 34,
      name: 'Organic Coconut'
    }, {
      id: 35,
      name: 'Watermelon'
    }, {
      id: 36,
      name: 'Organic Wheatgrass'
    }, {
      id: 37,
      name: 'Coconut Milk'
    }, {
      id: 38,
      name: 'Oats'
    }, {
      id: 39,
      name: 'Shiitake + Crimini Mushrooms'
    }, {
      id: 40,
      name: 'Organic Apple'
    }, {
      id: 41,
      name: 'Organic Camu Camu'
    }, {
      id: 42,
      name: 'Organic Zucchini'
    }, {
      id: 43,
      name: 'Organic Pea Protein'
    }, {
      id: 44,
      name: 'Chia Seed'
    }, {
      id: 45,
      name: 'Spinach'
    }, {
      id: 46,
      name: 'Organic Acerola Cherry'
    }, {
      id: 47,
      name: 'Butternut Squash Noodles'
    }, {
      id: 48,
      name: 'Sweet Potato'
    }, {
      id: 49,
      name: 'Galangal'
    }, {
      id: 50,
      name: 'Basil'
    }, {
      id: 51,
      name: 'Organic Raspberry'
    }, {
      id: 52,
      name: 'Black Garlic'
    }, {
      id: 53,
      name: 'Zucchini'
    }, {
      id: 54,
      name: 'Organic Peppermint'
    }, {
      id: 55,
      name: 'Raw Pumpkin Seed'
    }, {
      id: 56,
      name: 'Golden Figs'
    }, {
      id: 57,
      name: 'Papaya'
    }, {
      id: 58,
      name: 'Dulse Seaweed'
    }, {
      id: 59,
      name: 'Garlic'
    }, {
      id: 60,
      name: 'Madras Curry'
    }, {
      id: 61,
      name: 'Cordyceps Mushroom'
    }, {
      id: 62,
      name: 'Tomato'
    }, {
      id: 63,
      name: 'Reishi Mushroom'
    }, {
      id: 64,
      name: 'Cinnamon'
    }, {
      id: 65,
      name: 'Red Miso'
    }, {
      id: 66,
      name: 'Macadamia Nut'
    }, {
      id: 67,
      name: 'Organic Acai Berry'
    }, {
      id: 68,
      name: 'Raw Almond'
    }, {
      id: 69,
      name: 'Chickpea'
    }, {
      id: 70,
      name: 'Organic Mango'
    }, {
      id: 71,
      name: 'Organic Coconut Oil'
    }, {
      id: 72,
      name: 'Organic Pineapple'
    }, {
      id: 73,
      name: 'Organic Celery'
    }, {
      id: 74,
      name: 'Scallion'
    }, {
      id: 75,
      name: 'Organic Vanilla Bean'
    }, {
      id: 76,
      name: 'Ginger'
    }, {
      id: 77,
      name: 'Cauliflower'
    }, {
      id: 78,
      name: 'Raw Walnut'
    }, {
      id: 79,
      name: 'Organic Blueberry'
    }, {
      id: 80,
      name: 'Organic Date'
    }, {
      id: 81,
      name: 'Organic Banana'
    }, {
      id: 82,
      name: 'Rosemary'
    }, {
      id: 83,
      name: 'Vanilla Bean'
    }, {
      id: 84,
      name: 'Ginseng'
    }, {
      id: 85,
      name: 'Organic Strawberry'
    }, {
      id: 86,
      name: 'Carrot'
    }, {
      id: 87,
      name: 'Oregano'
    }, {
      id: 88,
      name: 'Lemon2'
    }, {
      id: 89,
      name: 'Organic Garbanzo Beans'
    }, {
      id: 90,
      name: 'Organic Blackberry'
    }, {
      id: 91,
      name: 'Organic Raw Almond Butter'
    }, {
      id: 92,
      name: 'Pecans'
    }, {
      id: 93,
      name: 'Organic Mulberry'
    }, {
      id: 94,
      name: 'Organic Pepper'
    }, {
      id: 95,
      name: 'Organic Hemp Seed'
    }, {
      id: 96,
      name: 'Organic Pumpkin'
    }, {
      id: 97,
      name: 'Organic Blue Majik'
    }, {
      id: 98,
      name: 'Organic Gluten-Free Oats'
    }, {
      id: 99,
      name: 'Organic Cardamom'
    }, {
      id: 100,
      name: 'Lemon Juice'
    },

import React, { useState } from 'react'
import Alert from '@material-ui/lab/Alert'

import TextField from '@material-ui/core/TextField'
import Grid from '@material-ui/core/Grid'

import { makeStyles } from '@material-ui/core/styles'

var useStyles = makeStyles((theme) => ({
    root: {
        '& > *': {
            margin: theme.spacing(1),
            width: '25ch',
        },
        submit: {
            color: 'red',
        },
    },
}))

var IngredientInput = ({ indgredients, products }) => {
    var [indgredients, setIngredients] = useState(indgredients)
    var [text, setText] = useState('')
    var [isInAPI, setIsInAPI] = useState(false)
    var [wasAPICallMade, setWastAPICallMade] = useState(false)

    function CheckIngredients(input) {
        if (indgredients.some((item) => item.name === input)) {
            setIsInAPI((prevState) => !prevState)
            console.log('isInAPI ', isInAPI)

            setWastAPICallMade((prevState) => !prevState)
            console.log('wasAPICallMade ', wasAPICallMade)
        }
    }

    function handleTextChange(e) {
        console.log('e', e.target.value)
        setText(e.target.value)
    }

    function handleSubmit(e) {
        e.preventDefault()
        CheckIngredients(text)
        setText('')
    }
    
    var classes = useStyles()

    return (
        <>
            <Grid container justify="center">
                <form onSubmit={handleSubmit} className={classes.root}>
                    <TextField
                        value={text}
                        onChange={handleTextChange}
                        id="outlined-basic"
                        label="Outlined"
                        variant="outlined"
                    />
                    <button type="submit" className={classes.submit}>
                        {' '}
                        Check Ingredient{' '}
                    </button>
                </form>
                {wasAPICallMade ? (
                    isInAPI ? (
                        <Alert severity="success">
                            This is a success alert — check it out!
                        </Alert>
                    ) : (
                        <Alert severity="error">
                            This is an error alert — check it out!
                        </Alert>
                    )
                ) : null}
            </Grid>
        </>
    )
}
export default IngredientInput

Update

Based on what Emile and Lanxion suggested I tried this:

useEffect(() => {
    console.log('isInAPI in useEffect', isInAPI)
    console.log('wasAPICallMade in useEffect', wasAPICallMade)
}, [isInAPI, wasAPICallMade]) 

function CheckIngredients(input) {
    setWastAPICallMade(true)
    var found = indgredients.some((item) => item.name === input)

    console.log('found ', found)
    if (found) {
        setIsInAPI(true)
        console.log('isInAPI ', isInAPI)
    }
}

Now two questions with this change:

I'm correct in understanding useEffect will fire on the initial render and everytime changes to those variables are made? If not, useEffect won't fire.

So in the CheckIngredients function setWastAPICallMade(true) gets ignored?

Also why doesn't var found = indgredients.some((item) => item.name === input) have the correct response???

function CheckIngredients(input) {
    setWastAPICallMade(true)
    var found = indgredients.some((item) => item.name === input)

    console.log('found ', found)
    if (found) {
        setIsInAPI(true)
        console.log('isInAPI ', isInAPI)
    }
}

I might be confused by your question, but should the `setWastAPICallMade` call just be moved outside of the `if` block? — Brian Thompson, Aug 25 '20 at 21:25
Ah!!! that's right thank you!, but I'm still getting a `false` from the `some` method.... — Antonio Pavicevac-Ortiz, Aug 25 '20 at 21:32
Note that [`console.log('isInAPI ', isInAPI)` will never show the updated values.](https://stackoverflow.com/q/54069253/1218980) — Emile Bergeron, Aug 25 '20 at 21:42

score 0 · Answer 1 · answered Aug 25 '20 at 21:32

Most likely, your state is being updated, but useState hook functions are asynchronous, so if you log the state right in the next line, it may not reflect the change immediately. If you would like to check the value of a specific state after change to it, you can use a useEffect hook with the second value as the state variable that you are watching.

useEffect(() => {
    console.log('isInAPI ', isInAPI); 
    console.log('wasAPICallMade ', wasAPICallMade)
}, [isInAPI, wasAPICallMade])// This is be executed when "isinApi" or "wasAPICallMade" state changes

React Hooks, useState: Conditional in handleSubmit is being ignored

1 Answers1