How to pass dynamic id and hence dynamic toggler to UncontrolledCollapse tag of Reactstrap?

Question

Reactstrap Uncontrolled Collapse doesn't take template string!

{
    state.data.map(datum => {
        return (
            <>
                <Card id={`toggler${datum._id}`} className="mb-1 shadow-sm" >
                   <CardBody>
                       <div dangerouslySetInnerHTML={{ __html: datum.faqHeading }} /> 
                   </CardBody>
                </Card>
                <UncontrolledCollapse toggler=`toggler${datum._id}`>
                    <Card>
                        <CardBody  >
                            <div dangerouslySetInnerHTML={{ __html: datum.faqBody }} />
                        </CardBody>
                    </Card>
                </UncontrolledCollapse>
            </>
        )
    })
}

Or is there any other way to achieve it? The data is coming from an API. Depending on that data (number of cards), Cards will be rendered!

Mohammad Basit · Accepted Answer · 2020-09-26T15:30:18.140

The data coming from the API will be possibly an array [{},{},{}] of objects. If you have control over the data that is getting returned from the API you can add a unique string to use for an id. By this way you can discard the use of template literals and use a simple id

I think datum._id is coming as a document from mongodb. Don't use _id to distinguish the cards in your case, Instead set an id for each object depending upon the card type and then use it. For example your own id instead of _id of mongodb.

<Card>
  <CardBody>
     <div dangerouslySetInnerHTML={{ __html: datum.faqBody }}/>
  </CardBody>
</Card>

Secondly, I can see that you're using dangerouslySetInnerHTML. Improper use of this feature can open you up to a cross-site scripting (XSS) attack because what you're doing is that datum.faqBody which is coming from the api can have a script tag containing some malicious code can execute on your website leading to XSS attack. Make sure you call some santizing function for HTML before setting it like this.

function createMarkup() {
  // Purify HTML here and return 
};

<div dangerouslySetInnerHTML={createMarkup()} />

Library for DOM purification : DOM Purify

score 0 · Answer 2 · answered Sep 23 '20 at 06:00

You would have to wrap it in {} when you are in scope of JSX e.g., prop={`${variable}-some-other-string`}

However, I think you would also want to read this question. It seems Reactstrap actually makes use of querySelectorAll, so if you have just numbers for your id & toggler (which I suspect you have), it won't work. You need to make sure your datum._id contains at least an alphabet letter as its first character and not a number. After fulfilling that prerequisite, the below syntax should suffice:

toggler={datum._id}

How to pass dynamic id and hence dynamic toggler to UncontrolledCollapse tag of Reactstrap?

2 Answers2