Define a content list and populate it

Question

I'd like to define a field in a component that would display a set of values that my contributors could choose when using my component. Let's say that my field is a ratio, I want the users to be able to choose between 1/3, 2/3 or 1/2.

Could I get help on what to do, so far my code is working with a CommonFieldTypes.SingleLineText but I'd like to know how to add my different values in the Sitecore interface. Here is my definition in the component for the field :

    { name: 'ratio', type: CommonFieldTypes.ContentList, source: `dataSource=/sitecore/content/${
        packageJson.config.appName
      }/Selectors/RatioSelector` }

I've set in my data yml file the value :

            ratio:
            - id: Ratio-1-3

I've created a template

// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-manifest';

/**
 * This is the data template for an individual _item_ in the Tag's Content List field demo.
 * @param {Manifest} manifest Manifest instance to add components to
 */
export default function(manifest) {
  manifest.addTemplate({
    name: 'KeyValue-Template',
    displayName: 'Key Value',
    fields: [{ name: 'KeyValue', type: CommonFieldTypes.SingleLineText }],
  });
}

and 3 files in my data like this one :

id: Ratio-1-3
displayName: Tag
# Template defines the available fields. See /sitecore/definitions/templates/KeyValue-Template.sitecore.js
template: KeyValue-Template
fields:
  KeyValue: 1/3

Even with all of this if I want to display the value of ratio with this :

<Text field={fields.ratio} />

it is always empty.

If I put a value that is not in the defined items like Ratio-Unknown instead of Ratio-1-3 then it fails so I'm pretty sure that the list is almost working but I dont get any value.

Answer 1

Figured the answer myself by adding a console.log to the field.ratio : the result is not the one I expected. Instead of getting the selected item I get a list containing the selected item (I guess this is for handling multiselect cases). So I'll have to iterate through the results to get the selected item instead of having it directly.