useState is not updating inside array.map(). ReactJS

I am trying to add the values of an array by using useState inside an array.map but the values are not updating

function App() {    const [ingredients, setIngredients] = useState([]);        const getIngredients = (data) => {      data.map((item, i) => {        console.log(data[i]);        setIngredients([...ingredients, data[i]]);       // setIngredients([...ingredients, item]); <- Also doesnt work         console.log(ingredients);      });  

Console.log(data)

(26) ["Product", "Information↵NUTELLA", "HAZELNUT", "SPREAD", "↵Total:", "↵aty:", "↵BARILLA", "SPAGHETTI", "Z↵Total:", "↵CLASSICO", "CRMY", "ALFERO", "DI", "ROMA", "PENNE", "RIGATE", "PASTA", "↵Order", "Summary↵item", "Subtotat", "↵Sales", "Tax", "Total:", "", "↵", Array(0)]  

console.log(ingredients);

[]

console.log(items);

Lists out all the items one after the other  

https://stackoverflow.com/questions/67310874/usestate-is-not-updating-inside-array-map-reactjs April 29, 2021 at 12:01PM