How to fix code component errors in the Insert Menu preview

In March 2022, we made changes how the Insert Menu shows components.

The change was needed to support NPM packages in Framer and also improved performance and reliability. Components are shown exactly the same in the preview as in the final result.

Some components might show errors due to incorrect API usage that is no longer supported. For example, props.children in a code component will no longer by an array, so should be accessed using React.Children:

// Before
const childrenCount = props.children.length
// After
const childrenCount = React.Children.count(props.children)

// Before
const firstChild = props.children[0]
// After
const childrenArray = React.Children.toArray(props.children)
const firstchild = childrenArray[0]
// OR, when only one child is expected
const firstChild = React.Children.only(props.children)

// Before
props.children.map(child => doSomething(child)) 
// After
React.Children.map(children, (child) => doSomething(child))

// Before
const childrenCount = props.children.length
// After
const childrenCount = React.Children.count(props.children)

// Before
const firstChild = props.children[0]
// After
const childrenArray = React.Children.toArray(props.children)
const firstchild = childrenArray[0]
// OR, when only one child is expected
const firstChild = React.Children.only(props.children)

// Before
props.children.map(child => doSomething(child)) 
// After
React.Children.map(children, (child) => doSomething(child))

How to fix code component errors in the Insert Menu preview

Helpful?Was this article helpful?