CODEWITHSUNDEEP
typescriptnext.js
ATRIIX -_-
ATRIIX -_-

Reputation: 93

Type error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided

I'm developing webpage with Next JS.
In development environment, It is working well without anything error but when build in product environment, this error message is showing:
Type error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.
My code is here:

import React, { useState } from "react";
import { IconContext } from "react-icons";
import { AiOutlineClose } from "react-icons/ai";
import Modal from "react-modal";
import styled from "styled-components";
import styledButton from "../button/styledButton";
import { ModalCloseButton } from "./ModalCloseButton";

interface ShowModalProps {
    text: string,
    children: React.ReactNode
}

const StyledModal = styled(Modal)`
    position: relative;
    margin: 50px auto 0;
    text-align: center;
    width: 100%;
    height: 90%;
    padding: 5%;
    background-color: #555555;
    box-sizing: border-box;
    overflow-y: auto;
    
    @media screen and (min-width: 768px) {
        width: 40%;
        height: 100%;
        padding: 5%;
        margin: 0 auto;
    }
`

export default function ShowModal({ text, children }: ShowModalProps) {
    const [modalIsOpen, setIsOpen] = useState(false);
    
    return (
        <>
            <styledButton text={text} handleModalState={setIsOpen} />
            <StyledModal
                isOpen={modalIsOpen}
                style={{
                    overlay: {
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
                    }
                }}
                onRequestClose={() => setIsOpen(false)}
                ariaHideApp={false}
                className="animate__animated animate__fadeIn"
            >
                <IconContext.Provider value={{
                    style: {
                        width: "100%",
                        height: "100%"
                    }
                }}>
                    <ModalCloseButton buttoncolor="#FFFFFF">
                        <AiOutlineClose onClick={() => setIsOpen(false)} />
                    </ModalCloseButton>
                </IconContext.Provider>
                <p>Modal</p>
                {children}
            </StyledModal>
        </>
    )
}

When modify children type like this:
children: JSX.Element
or
children: JSX.Element|JSX.Element[]

showing another error message like this:
Type error: 'Component' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/home/runner/work/next-web/next-web/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

How can I fix?

thanks!

add: Product environment: aws

Edit:

return (
<>
    <p>Click Button!</p>
    <ShowModal text="Next">
        <form onsubmit={onSubmit}>
            <input  
                type="text"  
                placeholder="write your first name"/>  
            <input  
                type="text"  
                placeholder="write your last name"/>  
            <button>submit</button>
        </form>
    </showModal>
</>
)

Upvotes: 4

Views: 16295

Answers (2)

Noumenon
Noumenon

Reputation: 6412

This can happen when you try to display an array of JavaScript objects instead of React nodes. Instead of <div>{myObjects}</div>, use

<ol>
  {myObjects.map(({ name }) => (<li>{name}</li>))}
</ol>

Upvotes: 0

Andrew Hulterstrom
Andrew Hulterstrom

Reputation: 1725

Where are you using <ShowModal>? It sounds like you are passing multiple children to ShowModal. You should be able to fix this by wrapping those components in a <div> or in empty angle brackets <> wherever you are passing them as props to <ShowModal>.

If you want to pass multiple children, you can do this by putting them into an array. For this solution, you should change your interface to be like this:

interface ShowModalProps {
    text: string;
    children: React.ReactNode|React.ReactNode[];
}

This means that children can be either a single ReactNode or an array of ReactNodes.

In the code you added showing your use of <ShowModal>, your closing tag looks like this:

</showModal>

You will need to capitalize it to match the opening tag, like this: </ShowModal>

Here is an example of your code working as expected with these changes on codesandbox

Upvotes: 1

Related Questions