Javascript find() array method is returning undefined. what am I doing wrong?

Question

On the click of a button. I am dispatching the id to my resellerSlice so that I can be able to use .find() and select the exact array object that has the same id as my id

const handleDetailsModal = (e) => {
 
     setResellersId(e.currentTarget.id)
 
     dispatch(uiAction.toggle())
     dispatch(
         toggleResellers (resellersId)
     )
 
 }

On getting to the resellerSlice

    const resellerSlice = createSlice({
        name: 'reseller',
        initialState,
        reducers: {
            toggleResellers(state, action) {
                const resellerId = action.payload;
                const clickedReseller = state.resellers?.find((reseller) => reseller.id === resellerId);
    
                console.log(clickedReseller) //returns undefined(this is the problem)
    
              
            }
          
        }
    })

What am I doing wrong?

I need the const 'clickedReseller' to contain the properties of object that its Id is the same as the 'resellersId', So I can use the object.

Here's my initial state

const initialState = [
    {
        resellerName: 'xxxx xxxx',
        id: 1,
        resellerLimits: [
            {
                USD: 700,
                GBP: 200,
                EURO: 990,
            }
        ],
        paymentMethods: [
            'wirePay',
            'flux',
            'bankTransfer'
        ],
        totalTransactions: 0,
        rating: 0,
    },

This is what the objects inside the array looks like

What kind of type does the array resellers contain? And did you check if the value action.payload arrives properly? And what type is it? — Haim Abeles
– Haim Abeles, Commented Oct 7, 2022 at 11:53
@GergelyVízvári When I console.log resellerId, I get the value I am expecting. SO I think that part is correct — Jay Henry
– Jay Henry, Commented Oct 7, 2022 at 11:54
Are you sure state.resellers is not empty? find returns undefined when no values satisfy the condition developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Arnau
– Arnau, Commented Oct 7, 2022 at 11:56
state.resellers is not empty. Infact is a dummy array I created for my initial state. Let me update the question with the nature of my initial state — Jay Henry
– Jay Henry, Commented Oct 7, 2022 at 11:59

Jay Henry · Accepted Answer · 2022-10-07 14:11:49Z

2

So, I finally figured it out.

My resellerId was actually a string and not an integer.

I discovered this after doing a typeOf() on it.

So instead of using the === comparison operator I used == and it worked out.

Thanks guys 👍

answered Oct 7, 2022 at 14:11

Jay Henry

297 bronze badges

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

Comments

Arthur Walsh · Accepted Answer · 2022-10-07 11:58:10Z

0

Normally, the state of your reducer is alreay the state.resellers as demonstrated in the redux toolkit documentation, so you can do directly state.find(reseller => reseller.id === resellerId) !

answered Oct 7, 2022 at 11:58

Arthur Walsh

564 bronze badges

1 Comment

Jay Henry Over a year ago

I also tried this, I kept getting back undefined

Collectives™ on Stack Overflow

Javascript find() array method is returning undefined. what am I doing wrong?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related