React/Redux - View treating array in store as object

Question

I have an array at the root level of my Redux store but for some reason my view is treating it as an object.

Code Snippet:

const notes = useSelector(state => state.notes)
...
            <p>Notes</p>
            <p>{typeof notes}</p>
            <p>{JSON.stringify(notes)}</p>
            <p>{JSON.stringify(notes[0])}</p>

Is showing up as:

I just want to make sure I'm not crazy and looking at the Redux docs it looks like this should be acceptable. Why might this not be working?

Edit

I'm glad I am not crazy, I guess my follow up question is why do I not see anything when I try:

export default function NotesTab() {
    const notes = useSelector(state => state.notes)
    return (
        <div className="flex flex-col w-full h-full justify-center items-center">
            {notes.forEach(note => (
                <p>Test</p>
            ))}
        </div>
    )
}

That is an array! (See the square brackets surrounding it?) Try adding notes[0].content. As for the typeof, , in JavaScript arrays aren't actually a type, they are a class so an instance of an array is an object. — Sydney Y
– Sydney Y, Commented Feb 8, 2020 at 22:26
why do I not see anything. Maybe try Array#map instead of Array#forEach. Example: {notes.map(note => (Test)}. Render something if there are no notes, so you can distinguish between your own error and an empty application state. {(!notes || !notes.length) && (No Notes here)} — thor83
– thor83, Commented Feb 8, 2020 at 22:52
I think React expects you to use #map which will return an array of JSX expressions instead of iterating over your notes with #forEach — thor83
– thor83, Commented Feb 8, 2020 at 22:58
That was it, changing it to map fixed it, if you could update your answer to include that I will gladly accept it. :D — av0000
– av0000, Commented Feb 8, 2020 at 23:06

thor83 · Accepted Answer · 2020-02-08 22:28:55Z

2

That's the expected behavior from typeof operator. It will report an array as an object. You can use Array.isArray() or Object.prototype.toString.call([]) which will give you [object Array]. Or Object.constructor.name.

> const foo = [1,2];
typeof foo; // object
< "object"

> Object.prototype.toString.call(foo)
< "[object Array]"

> foo.constructor.name
< "Array"

You can see from the output of JSON.stringify(notes) that your redux selector query is returning an array as you expected, so you should be good. HTH

edited Feb 8, 2020 at 22:28

answered Feb 8, 2020 at 22:21

thor83

964 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React/Redux - View treating array in store as object

Edit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related