Displaying selected options in custom multiselect dropdwown as tags - React

Question

I've custom multiselect dropdown which is implemented as given below:

    const RequestExpertSupport = function Basic({
    data,
    onSelectedItemsChanged,
    selectedItemsIndices,
}) {
    const props = {
        data: [
            "My account and profile",
            "Understanding my footprint",
            "Target setting",
            "Specific actions",
            "Creating a plan",
            "Finance, funding and grants ",
            "Using the Carbon Planner platform",
            "Other",
        ],
        selectedItemsIndices: [],
    };

    //
    const handleSelectedItemsChanged = useCallback(
        selectedItemsIndices => {
            onSelectedItemsChanged(selectedItemsIndices);
        },
        [onSelectedItemsChanged]
    );

    function onSelectedItemsChanged(selectedItemsIndices) {
        console.log(selectedItemsIndices);
    }

    function renderItem(datum, index) {
        return <span>{datum}</span>;
    }

    return (
        <RequestExpertSupportDiv>
            <div className="container">
                <div className="formContainer">
                    <form>
                        <label className="helpLabel">What would you like help with?</label>
                        <DropdownListTrigger
                            dropdownList={
                                <MultiSelectDropdownList
                                    id="multiSelectDrop"
                                    data={props.data}
                                    onSelectedItemsChanged={handleSelectedItemsChanged}
                                    renderItem={renderItem}
                                    selectedItemsIndices={selectedItemsIndices}
                                />
                            }
                            position="right"
                            className="ddlFilter"
                        >
                            <button className="zb-button zb-button-secondary zb-button-with-icon-after">
                                <span>Choose topic(s)</span>
                                <Icon
                                    name="chev-down-xsmall"
                                    style={{
                                        verticalAlign: "text-bottom",
                                    }}
                                    title={null}
                                />
                            </button>
                        </DropdownListTrigger>
                        <div className="selectedTopics">Selected topics are:</div>
                        <label className="tellUsLabel">What would you like help with?</label>
                        <textarea
                            name="helpReview"
                            rows="4"
                            cols="43"
                            className="textArea"
                            style={{ width: "410px", height: "290px", marginTop: "2%" }}
                            placeholder="Type your message here ..."
                        ></textarea>

                        <button className="sendBtn" name="sendBtn">
                            Send
                        </button>
                    </form>
                </div>
            </div>
        </RequestExpertSupportDiv>
    );
};

export default RequestExpertSupport;

This code fetches the indices of selected options in Multiselect dropdown.

function onSelectedItemsChanged(selectedItemsIndices) {
    console.log(selectedItemsIndices);
}

Console is given below:

Now I want to display those selected options as tags like this:

This is the code for tags:

<Div
    flex="flex"
    display="inline-flex"
    height="36px"
    borderWidth="1px solid #009FAC"
    borderRadius="3px"
    backgroundColor="#def8fa"
    justifyContent="space-around"
    alignItems="center"
    marginRight="10px"
    marginBottom="10px"
    style={{ minWidth: "92px", maxWidth: "175px" }}
>
    <span
        padding="0px"
        fontSize="14px"
        lineHeight="20px"
        fontWeight="400"
        marginLeft="5px"
        marginRight="5px"
        style={{ maxWidth: "142px" }}
    >
        // need to put selected options here
    </span>
    <img name="close-inverted-small" onClick={event => removeSelectedTopic(event, topicId)} />
    &nbsp;
</Div>

I'm not getting how to link function SelectedItemsChanged(selectedItemsIndices) with that tags frontend code to dosplay selected options as tags...

Answer 1

You need to put all the codes in the last part in a loop for rendering data. for example you should write last part as below by using selectedItemIncedies and data:

{ selectedItemIncedies.map ((selectedItemIndex) => { return (<Div
flex="flex"
display="inline-flex"
height="36px"
borderWidth="1px solid #009FAC"
borderRadius="3px"
backgroundColor="#def8fa"
justifyContent="space-around"
alignItems="center"
marginRight="10px"
marginBottom="10px"
style={{ minWidth: "92px", maxWidth: "175px" }}

<span
    padding="0px"
    fontSize="14px"
    lineHeight="20px"
    fontWeight="400"
    marginLeft="5px"
    marginRight="5px"
    style={{ maxWidth: "142px" }}
>
    {data.find((item, index)=> index===selectedItemIndex)}
</span>
<img name="close-inverted-small" onClick={event => removeSelectedTopic(event, topicId)} />
&nbsp;
</Div>)})}

Answer 2

You'll want to render the tags using map based on the selectedItemsIndices array. First, pass the selectedItemsIndices array as props to a TagListComponent.

Once that's all set, render each of the selected tags in selectedItemsIndices in the TagListComponent

TagListComponent.js

    const TagListComponent = function Basic({
        selectedItemsIndices,
    }) {
        return (
            <div>
                {selectedItemsIndices.map((selectedItemIndex, index) => {
                    return (
                        <div>
                            <span>{data[selectedItemIndex]}</span>
                        </div>
                    );
                })}
            </div>
        );
    };

    export default TagListComponent;

In the <span/> tag above, put whatever styling you'd like for the tag itself.