[Solved] Access inner Object and form Jsx

by 


const set1 = {
          men: {value: 'men',label: 'Men',type: 'select',
        options: [
          { 1: { label: 'boy', value_string: '1' } },
          { 2: { label: 'Guy', value_string: '2' } },
        ],
      },
      women: {value: 'women',label: 'Women',type: 'select',
        options: [
          { 1: { label: 'lady', value_string: '1' } },
          { 2: { label: 'girl', value_string: '2' } },
        ],
      },
      kids: {value: 'kids',label: 'Kids',type: 'select',
        options: [
          { 1: { label: 'infant', value_string: '1' } },
          { 2: { label: 'baby', value_string: '2' } },
        ],
      },
        };

const set2 = {
  men: { code: "men", title: "Men" },
  women: { code: "Women", title: "Women" },
};



let keys = Object.keys(set1).filter(key => key in set2)

let result = {} 
keys.forEach((key)=>{
      result = {...result,...{[key]:set1[key]}}
})

console.log(result)

and for showing the labels

{Object.keys(result).map(key => {
    return (
      <Fragment key={key}>
        <h3>{result[key].attribute_label}</h3>
        {Object.values(result[key].attribute_options).map(option => (
          <span key={option.value_string} style={{ paddingRight: "10px" }}>
            {option.label}
          </span>
        ))}
      </Fragment>
    );
  })}

working link https://codesandbox.io/s/winter-dream-x3vi7?file=/src/App.js

11

solved Access inner Object and form Jsx