CODEWITHSUNDEEP
javascriptreactjssweetalert
Martin Nordström
Martin Nordström

Reputation: 6025

You must pass a valid ReactElement | Sweetalert-react

I am trying to use the sweetalert-react package (https://github.com/chentsulin/sweetalert-react) as a modal for my app. Right now I got it to work, but I want to be able to display a const that has my component:

const clusterDoors = lock.doors.map(clusterDoor => {
  return (
    <div key={clusterDoor.port_id}>
      <ClusterListItem
        clusterDoor={clusterDoor}
        customer={
          clusterDoor.allocation.customer ? (
            keyedCustomers[clusterDoor.allocation.customer]
          ) : (
            false
          )
        }
        .....

So I read their docs and found out that I can achieve that with ReactDOMServer.renderToStaticMarkup. So I simple need to:

text={renderToStaticMarkup(<MyComponent />)}

But the problem is that my component is inside of a constant, so if I try to do:

text={renderToStaticMarkup({clusterDoors})}

I will get the error:

You must pass a valid ReactElement.

I wonder if there's some workaround to this?

I did some research and tried also tried to do:

const clusterDoors = React.createClass({
  render: function() {
    lock.doors.map(clusterDoor => {
      return (
        <div key={clusterDoor.port_id}>
          <ClusterListItem
            clusterDoor={clusterDoor}
            customer={
              clusterDoor.allocation.customer ? (
                keyedCustomers[clusterDoor.allocation.customer]
              ) : (
                false
              )
            }
            delivery={
              clusterDoor.allocation.delivery ? (
                keyedDeliveries[clusterDoor.allocation.delivery]
              ) : (
                false
              )
            }
          />
        </div>
      )
    })
  }
})

But that didn't do the trick.

If I pass it a valid react component (ClusterListItem) my app won't break, but nothing will show because of the array clusterDoor wont exist.

I hope I explained my situation well. Thanks for reading.

Upvotes: 1

Views: 422

Answers (1)

Prakash Sharma
Prakash Sharma

Reputation: 16472

The problem with your code is that you are passing an array of elements because clusterDoors is an array and renderToStaticMarkup is expecting a single element. Therefore you are getting this error.

Solution: Just wrap your array in a div tag so it becomes a single node element like this

text={renderToStaticMarkup(<div>{clusterDoors}</div>)}

Upvotes: 1

Related Questions