How to loop every idx's object property in an Array?

Question

I'm new to coding and this situation poses quite a problem for me. I'm working with reactjs and inside a function I have props like this:

const{a,b,c,d,e,f,g,h} = props

So 'props' is an object, 'c' is an array, inside 'c' are 100 objects ranging from 'idx' 0 to 99, all these objects have an identical property call 'x', 'x' value is boolean 'true' or 'false'. I want to know the best way to loop through all these 100 objects so it will return 'true' or 'false'

Basically, c is like this:

let c = [{x:true},{x:true},{x:false}];

I only know so far as

console.log ('show value', props.c[idx])

to show key and value inside this object but cannot take the key I want by props.c[idx].x . I think I was wrong some where. Please help

Bonus: I want to know this so for every 'true', a button TRUE appear and vice versa, it's kinda like this

{!x (<button> False </button>)}

Answer 1

It's a bit hard to interpret your question. But wouldn't this is what you're looking for (I use array of 3 elements, but it should work for 100 of them):

let c = [{x:true},{x:true},{x:false}]; 
console.log(c.map(c=>c.x));

Answer 2

Let's assume that your data structure for props looks like this.

var props= {c : [{x:false},{x:true},{x:false},{x:true},{x:false},{x:true},{x:true}]}

Then your accessing method is indeed correct. Working snippet below!

var props= {c : [{x:false},{x:true},{x:false},{x:true},{x:false},{x:true},{x:true}]}

console.log("props.c[idx] value is : ",props.c[0])
console.log("props.c[idx].x value is : ",props.c[0].x)

console.log("=================================================");
//loop through all
for(idx in props.c){
    console.log("Loop ",idx," : ",props.c[idx].x);
}