CODEWITHSUNDEEP
javascriptstringreactjs
Sergio Tapia
Sergio Tapia

Reputation: 9823

Return a React's method 'return' as a string

I'm using the Drop javascript library, and I get this error:

Drop Error: Content function should return a string or HTMLElement.

I'm using React to handle a click, and then open the Drop popup.

popupContent: function() {
  return (
    <div>
      <p>Test.</p>
    </div>
  )
},

initDrop: function() {
  var self = this;
  var drop = new Drop({
    target: self.refs.xxx,
    openOn: 'click',
    content: function() {
      self.popupContent();
    }
  });
},

How can I make the popupContent function return as a string?

Upvotes: 1

Views: 12952

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

You should return String from popupContent because now popupContent returns JSX but JSX is not a String

popupContent: function() {
  return (
    '<div>' +
      '<p>Test.</p>' +
    '</div>'
  )
},

if you use ES2015 you can use Template literals 

popupContent: function() {
  return (
    `<div>
      <p>Test.</p>
    </div>`
  )
},

also there is package jsx-to-string(note - you should install it)

popupContent: function() {
  return jsxToString(
    <div>
      <p>Test.</p>
    </div>
  )
},

Example

Upvotes: 1

Related Questions