How can i access array value in Site-core Jss?

Question

I am new to Sitecore JSS. I create a simple component using JSS scaffold command. There is a default heading variable and this heading variable is accessible in my en.yml file.

Component under src/components
import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';
const TestComponent = (props) => (
  <div>
    <p>TestComponent Component</p>
    <Text field={props.fields.heading} />
  </div>
);
export default TestComponent;

Definition of the component under Sitecore/definition

import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
export default function(manifest) {
  manifest.addComponent({
    name: 'TestComponent',
    icon: SitecoreIcon.DocumentTag,
    fields: [
      { name: 'heading', type: CommonFieldTypes.SingleLineText },
    ],
  });
}

en.yml file

placeholders:
  jss-main:
  - componentName: TestComponent
    fields:
      heading: hello  vishnu

I am able to access the heading variable. but I am unable to create an array value. I want to create a dropdown in my component and the dropdown value should come from the array. Please Help me it's very necessary for me thanks in advance

Answer 1

There is no dropdown component OOO from JSS, but take reference from the checkbox component of the JSS, and then you can modify your markup to follow the structure like a dropdown.

The Implementation of Checkbox is present at this location: /src/components/Styleguide-FieldUsage-Checkbox/index.js

and, Definition: /sitecore/definitions/components/Styleguide-FieldUsage-Checkbox.sitecore.js

If you want to create your custom fields then follow custom component of JSS as per the following info Implementation: /src/components/Styleguide-FieldUsage-Custom/index.js

Definition: /sitecore/definitions/components/Styleguide-FieldUsage-Custom.sitecore.js