Why is react-nestable rendering [object Object] instead of expected JSX?

Question

I am trying to render custom JSX snippets based on the objects stored in an array in using react nestable. But instead of the JSX snippet, [object Object] gets rendered on the screen. Here is my code

//Top of the component file
import Nestable from "react-nestable"

const template = [
  {
    id: uuid(),
    type: "button1",
    text: "Next"
  },
  {
    id: uuid(),
    type: "button2",
    text: ["Back", "Next"]
  }
]

//Inside the component function
const [items, setItems] = useState(template)

const renderItems = ({ item }) => {
    switch (item.type) {
      case "button1":
        return (
          <tr key={item.id} style={{ backgroundColor: "#ffffff" }}>
            <td colSpan="2" style={{ padding: "16px" }}>
              <button
                contentEditable="true"
                style={{
                  border: "none",
                  outline: "none",
                  backgroundColor: "#2563eb",
                  borderRadius: "7px",
                  padding: "8px 12px",
                  color: "#ffffff",
                  fontWeight: "500",
                  letterSpacing: "0.5px"
                }}
              >
                {item.text}
              </button>
            </td>
          </tr>
        )
      case "button2":
        return (
          <tr key={item.id} style={{ backgroundColor: "#ffffff" }}>
            <td style={{ padding: "16px" }}>
              <button
                contentEditable="true"
                style={{
                  border: "none",
                  outline: "none",
                  backgroundColor: "#db2777",
                  borderRadius: "7px",
                  padding: "8px 12px",
                  color: "#ffffff",
                  fontWeight: "500",
                  letterSpacing: "0.5px"
                }}
              >
                {item.text[0]}
              </button>
            </td>
            <td style={{ padding: "16px" }}>
              <button
                contentEditable="true"
                style={{
                  border: "none",
                  outline: "none",
                  backgroundColor: "#2563eb",
                  borderRadius: "7px",
                  padding: "8px 12px",
                  color: "#ffffff",
                  fontWeight: "500",
                  letterSpacing: "0.5px"
                }}
              >
                {item.text[1]}
              </button>
            </td>
          </tr>
        )
    }
  }

//Inside component return
<table style={{ width: "100%", textAlign: "center" }}>
 <Nestable items={items} renderItems={renderItems} />
</table>

OUTPUT:

When I paste the snippets that I returned in the function renderItems directly instead of the the snippet renders perfectly.

What I am expecting:

I have tried removing the inline styles, reinstalling the packages but did not work. Alternative approaches are welcomed.

vishal gajera · Accepted Answer · 2023-04-19 05:04:51Z

2

I checked your code you need to change the key name that you are passing into Nestable component it's default API key name for renderItems is renderItem but your current key with renderItems 's' at last.

 <Nestable items={items} renderItem={renderItems} />

answered Apr 19, 2023 at 5:04

vishal gajera

716 bronze badges

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

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Why is react-nestable rendering [object Object] instead of expected JSX?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related