ttrinh / react-inlinese

React Inline Editor
https://ttrinh.github.io/react-inlinese/
4 stars 1 forks source link

Failed prop type: Invalid prop `children` #1

Open LarsBuur opened 6 years ago

LarsBuur commented 6 years ago

We have texts with line breaks that we want to display to the user in non-edit modus.

We use this code to break up the string into multiple lines.

{item.text.split('\n').map(function(item, key) {
return (
    <div key={key}>
        {item}
        <br/>
    </div>
);
})

this throws this warning in the console:

main.js:4530 Warning: Failed prop type: Invalid prop `children` supplied to `ReactInlinese`.
    in ReactInlinese (at messages.js:183)
    in DragHandle (created by Motion)
    in Motion (created by Movable)
    in Movable (created by Draggable)
    in DraggableDimensionPublisher (created by Draggable)
    in Draggable (created by Connect(Draggable))
    in Connect(Draggable) (at messages.js:114)
    in div (at messages.js:109)
    in DroppableDimensionPublisher (created by Droppable)
    in Droppable (created by Connect(Droppable))
    in Connect(Droppable) (at messages.js:107)
    in DragDropContext (at messages.js:105)
    in _default (at bundle.jsx:94)
    in div (created by GridColumn)
    in GridColumn (at bundle.jsx:92)
    in div (created by GridRow)
    in GridRow (at bundle.jsx:91)
    in div (created by Grid)
    in Grid (at bundle.jsx:55)
    in form (created by Form)
    in Form (at bundle.jsx:54)
    in div (created by Container)
    in Container (at bundle.jsx:53)
    in div (at bundle.jsx:52)
    in div (at bundle.jsx:51)
    in div (created by Container)
    in Container (at Layout.jsx:77)
    in _default (at bundle.jsx:50)
    in _default (created by Container)
    in AppContainer (created by Container)
    in Container (created by App)
    in App

Any suggestions how to resolve this? - we provide the plain string to the value of the Inlinese component.

ttrinh commented 6 years ago

Thank for submitting bug! This is a notable one. React-Inlinese hasn't supported multiple children yet (https://github.com/ttrinh/react-inlinese/blob/f2c3185b944637d1e07bdc2f6ad9fe563db2f5dc/src/index.js#L276). In the meantime, a quick fix could be achieved by adding an enclosing <span>..</span> around your children elements.

See this example https://codesandbox.io/s/p744o07vrm

Thanks!! I'm gonna upgrade/rewrite this package soon to make it more flexible.