Is it possible to pass an array data type to a react component with JSS Sitecore?

Question

I am wanting to pass an array of string's into a react component with JSS Sitecore. At the moment, I am having to use CommonFieldTypes.SingleLineText in the sitecore component definition and splitting the string passed in on the ', ' to create an array within the actual React component.

Is there a field type where I can pass in a string array in the yml file to the component structure without the need to then turn it into an array in the component like so?

    - componentName: ProgressBar
    fields:
        data: ["1. test", "2. test", "3. Test"]

Answer 1

For resolving similar kind of situation I used .parse() and .map()

For Example:

import React, { Component } from "react";

export class Example1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            stringData: '["1. test", "2. test", "3. Test"]'
        };
    }

    render() {
        // Parsed valued from string
        const valuesArray = JSON.parse(this.state.stringData);

        return (
            <>
                <div>
                    <h3>Using local JSON file Array</h3>
                    <ul>
                        {valuesArray.map(item => {
                            return <li>{item}</li>;
                        })}
                    </ul>
                </div>
            </>
        );
    }
}

export default Example1;

Let me know if that helps