Reactjs: implementing dangerouslySetInnerHTML inside a functional component

Question

I have been trying to figure out how to apply dangerouslySetInnerHTML to this label={item.description} inside of this component:

const SwitchList = ({
  color,
  disabled,
  sortKey,
  sortDirection = SORT_DIRECTION.ASC,
  items,
  data,
  children,
  onChange
}) => {
  if (items.length === 0) {
    return React.Children.only(children);
  }
  let sortProp = null;
  let sortedItems = items;
  if (sortKey) {
    sortProp = new SortProperty(sortKey, sortDirection === SORT_DIRECTION.ASC);
    sortedItems = items.sort(genericObjectSort(sortProp));
  }
  return (
    <div>
      {sortedItems.map(item => {
        return (
          <Switch
            checked={data[item.key]}
            label={item.description}
            onChange={onChange(item.key)}
            key={item.key}
            color={color}
            disabled={
              typeof disabled === "function" ? disabled(item) : disabled
            }
            className={styles.customSwitch}
          />
        );
      })}
    </div>
  );
};
SwitchList.propTypes = {
  sortKey: PropTypes.string,
  sortDirection: PropTypes.number,
  items: PropTypes.arrayOf(PropTypes.object),
  data: PropTypes.object,
  children: PropTypes.node,
  color: PropTypes.string,
  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  onChange: PropTypes.func
};

export default SwitchList;

A helper function will not help because this is not a class-based component.

How can I take that {items.description} and apply dangerouslySetInnerHTML inside a functional component?

I am not getting your question clearly. But to set dangerouslySetInnerHTML you don't need a helper function. you can just add dangerouslySetInnerHTML as an attribute/prop like this. <Switch dangerouslySetInnerHTML={{__html: item.description}} /> Otherwise, please provide me more details. — Kyaw Siesein
– Kyaw Siesein, Commented Jul 15, 2019 at 4:08

Bhawana · Accepted Answer · 2019-07-15 08:51:31Z

4

Try this:

<Switch
            checked={data[item.key]}
            label={<span dangerouslySetInnerHTML={{__html:item.description}}></span>}
            onChange={onChange(item.key)}
            key={item.key}
            color={color}
            disabled={
              typeof disabled === "function" ? disabled(item) : disabled
            }
            className={styles.customSwitch}
          />

Or

label= {<span className="content" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description) }}></span>}

answered Jul 15, 2019 at 8:51

Bhawana

3801 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Over a year ago

Bhawana, any particular reason you added className="content" in the second example? Thank you for your answer.

Bhawana Over a year ago

I just add it for dummy purpose like you can add any content in span and add any content class on span.

Collectives™ on Stack Overflow

Reactjs: implementing dangerouslySetInnerHTML inside a functional component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related