Ad

Cannot Use Array Methods On Array Of Objects

I cannot use array methods on an array of objects. The shellsArray logs out (6) [{…}, {…}, {…}, {…}, {…}, {…}] in the console, but I am unable to use array methods on it. The proto of the console says array(0)

    import React, { useState } from 'react'

const RecipeForm = (props) => {
    const [baseLayer, setBaseLayer] = useState('');
    const [condiment, setCondiment] = useState('');
    const [mixing, setMixing] = useState('');
    const [seasoning, setSeasoning] = useState('');
    const [shell, setShell] = useState('');
**let tacos = props.tacos;
    let shellsArray = tacos.shells;** // Shows an array that I cannot use array methods on
    console.log(shellsArray);

    const submitHandler = (e) => {
        e.preventDefault();
        props.saveCombination(baseLayer, condiment, mixing, seasoning, shell);
        setBaseLayer('');
        setCondiment('');
        setMixing('');
        setSeasoning('');
        setShell('');
    }
    return (
        <form onSubmit={submitHandler} >
            <select className="base-layer" name="baseLayer" value={baseLayer} onChange={(e) => setBaseLayer(e.target.value)} required >
            <option>SELECT BASE LAYER</option>
            <option>Mexican</option>
            <option>Asian</option>
            </select>
            <select className="condiment" name="condiment" value={condiment} onChange={(e) => setCondiment(e.target.value)} required >
            <option>SELECT CONDIMENT</option>
            <option>Tomato</option>
            <option>Lettuce</option>
            </select>
            <select className="mixing" name="mixing" value={mixing} onChange={(e) => setMixing(e.target.value)} required >
            <option>SELECT MIXING</option>
            <option>Tomato</option>
            <option>Lettuce</option>
            </select>
            <select className="seasoning" name="seasoning" value={seasoning} onChange={(e) => setSeasoning(e.target.value)} required >
            <option>SELECT SEASONING</option>
            <option>Tomato</option>
            <option>Lettuce</option>
            </select>
            <select className="shell" name="shell" value={shell} onChange={(e) => setShell(e.target.value)} required >
            <option>SELECT SHELL</option>
            <option>Tomato</option>
            <option>Lettuce</option>
            </select>
            <input type="submit" className="submit" />
        </form>
    );
}

export default RecipeForm;
Ad

Answer

If your shells array is a prop, it looks like you're trying to use it before the prop is defined. This is a common situation, and the usual approach it to guard against the error by first testing if your array is defined or not. The easiest method is to use a shortcut conditional:

Array.isArray(shells) && shells.map(shell=>{}) //or whatever
Ad
source: stackoverflow.com
Ad