search

nathancahill / split

Unopinionated utilities for resizeable split views
https://split.js.org/
MIT License
6.14k stars 450 forks source link

Warning: Failed prop type: Invalid prop `children[0]` of type `string` supplied to `SplitWrapper`, expected a single ReactElement. #706

Open divyanshu-parihar opened 2 years ago

divyanshu-parihar commented 2 years ago

Warning for invalid children types is keep popping up to me when I try to use my Split component inside another split component. I have tried different things like wrapping inner component with a div .I am rather new to this library so ,I might be doing something wrong.

Tools Used: standard create-next-app project Code.

             <Split direction='vertical' style={{ height: `calc(100vh - 4rem)` }}> {/* Change calc function to add sizing for another component*/}

                <Split className='flex'>
                    <textarea onChange={(e) => setData(e)} value={data.htmlcode} className="bg-[#1D1E22] text-white border-none p-1" style={{ height: "100%", width: "100%", resize: "none", caretColor: "whitesmoke" }} id="htmlcode" ></textarea>
                    <textarea onChange={(e) => setData(e)} value={data.csscode} className="bg-[#1D1E22] text-white border-none p-1" style={{ height: "100%", width: "100%", resize: "none", caretColor: "whitesmoke" }} id="csscode" ></textarea>
                    <textarea onChange={(e) => `setData(e)}` value={data.jscode} className="bg-[#1D1E22] text-white border-none p-1" style={{ height: "100%", width: "100%", resize: "none", caretColor: "whitesmoke" }} id='jscode' ></textarea>
                </Split>

                <div className='preview bg-white-100'></div>
            </Split>

Error: image