Extract the array out of an object in React

Question

For my React app, I have a function Query2 in a file service.ts such as:

interface Result {
   products: number[];
}

export async function Query2(molsSdf: string): Promise<Result>

{ 
   return  {products: [0.1]}    
}

In my component "draw1.jsx" file where I am importing my function Query2, I have these lines of codes:

import React, { useEffect, useState } from 'react';
import {Query2} from '../common-services/service.ts'

const [products, setProductivities] = useState([]);

    async function handleSearch () {

        const mol = window.JSDraw.get("test").getMolfile()

        const pds = await Query2(mol)

        setProductivities(pds)
    }
return ( 
            <div className="button">

                <Button onClick={handleSearch}>Search</Button>      

            </div> 

            <h1>

            {products.map(tox =>

                    <li>
                        Toxs
                    </li>
                )
            }

            </h1>

    );
}

export default Draw1;

" const pds = await Query2(mol) " is not getting an array back. I am passing "pds" to "setProductivities as if it's an array, but it's not an array, it's an object. How can I extract the array out of the object "pds" and pass that to setProductivities?

Som Shekhar Mukherjee · Accepted Answer · 2022-10-07 17:56:37Z

1

You can destructure the products key out of the object which is an array.

const { products } = await Query2(mol)
setProductivities(products)

You can also alias the destructured key to pds (if required).

const { products: pds } = await Query2(mol)
setProductivities(pds)

Or you can simply access the products key from the object, following is one way of doing the same.

const pds = (await Query2(mol)).products
setProductivities(pds)

answered Oct 7, 2022 at 17:56

Som Shekhar Mukherjee

8,1982 gold badges16 silver badges34 bronze badges

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

Comments

Javokhir · Accepted Answer · 2022-10-07 17:56:11Z

0

Because your function returns object with products property which is an arry. You need change to this:

  setProductivities(pds.products)

answered Oct 7, 2022 at 17:56

Javokhir

2281 silver badge6 bronze badges

Collectives™ on Stack Overflow

Extract the array out of an object in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related