I have a mapped array that I want to pass a variable into SCSS so that it can change a variable width

by

I have a function that maps an array of values from another file. The specific constant I want to work with is item?.level, which is of the format 1 | 2 | 3 | 4 | 5. What I see happening is in my *.scss file that I somehow do width: calc(100% * {item?.level} / 5);. This means that at level 1 the width is at 20%, and at level 5 the width is at 100%.

Here is my code of just the *.tsx:

    
{
    (children ?? []).map((item) => {
        return (
            <div className="point">
                <div className="point-title">{item?.title}</div>
                <div className="point-level">{item?.level}/5</div>
                <div className={item?.level + " out of 5"}>
                    <div className="point-level">
                        <div className="stars-outer">
                            <div className="stars-inner"></div>
                        </div>
                    </div>
                </div>
                {item?.description && (
                    <div className="point-description">{item?.description}</div>
                )}
            </div>
        );
    });
}

I just want to make it clear, that the constant {item?.level} is predetermined from another Typescript file, it is always of the form 1 | 2 | 3 | 4 | 5, but is nested in an unspecified length array, so map() is needed to display each item.

80 thoughts on “I have a mapped array that I want to pass a variable into SCSS so that it can change a variable width”

Leave a Comment