how to call variable name in array of object in React

Question

this is my code in react.

 const [value, setValue] = React.useState<CountriesEntityData | null>({
    id: '',
    name: '',
    regions: [
      {
        id: '',
        name: '',
        districts: [
          {
            id: '',
            name: '',
            locations: [{ id: '', city: '', division: '', street: '' }],
          },
        ],
      },
    ],
  })

I try this code in resolving this problem

value?.regions?.name

can anyone give me tutorial link in dealing in this kind of situation thank you.

Can you please elaborate more? Which variable name? Where you wanna use it? You wanna use a variable while defining a state or what? Why have you written this code value?.regions?.name ? — Aniruddha Shevle
– Aniruddha Shevle, Commented Oct 14, 2020 at 7:26
Do you expect to actually call setValue(null)? If not and with using an initial value, why even allow null (CountriesEntityData | null)? It just makes things more complicated. — Yoshi
– Yoshi, Commented Oct 14, 2020 at 7:36

garzj · Accepted Answer · 2020-10-14 08:04:24Z

1

If you just wanna use the first element you can do:

let name = value?.regions?.[0]?.name;

If if you wanna search the object based on an id, then I think there is a find function on the array which you can use like that:

let name = value?.regions?.find((elm) => elm.id == 'myId')?.name;

edited Oct 14, 2020 at 8:04

answered Oct 14, 2020 at 7:30

garzj

3,4123 gold badges12 silver badges19 bronze badges

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

Comments

A.R.SEIF · Accepted Answer · 2020-10-14 07:32:36Z

0

a regions in value is array.
and not answer value?.regions?.name .
because regions contains objects and objects contain property ```name'''

answered Oct 14, 2020 at 7:32

A.R.SEIF

8731 gold badge8 silver badges28 bronze badges

Comments

behzad · Accepted Answer · 2020-10-14 07:39:11Z

0

for this kind of problems, simply you can use log and see your variable in console

  console.log(your const);

then by looking at your console, easily you can see how to address your array to get your desired result.

Now assuming that you want to extract the nested names in the object, for two arrays inside each other, you should use two MAP which are nested. this can give you the idea:

{ListOfData.map((item, index) => (
  <div key={index}>
    <h1>{item.title}</h1>
    {item.content.map((c, i) => (
      <div key={i}>
        <h3>{c.title}</h3>
        <h3>{c.description}</h3>
        <hr />
      </div>
    ))}
  </div>
))}

answered Oct 14, 2020 at 7:39

behzad

8574 gold badges17 silver badges33 bronze badges

Collectives™ on Stack Overflow

how to call variable name in array of object in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related