CODEWITHSUNDEEP
reactjs
SkyeBoniwell
SkyeBoniwell

Reputation: 7092

Passing state values to a component results in undefined errors

I'm trying to figure out how to pass some state values to another React component.

Right now the way I have it works fine, but it looks messy.

So I define DungeonDetails like this:

const DungeonDetails = ({ children }) => (

    ReactDOM.createPortal(
        <div id="portal_DungeonDetails">
            {children}
        </div>,
        document.getElementById('portal-root')
    )
)

Here is my main function that handles data:

function DungeonEntries() {

    const [idVal, setIdValue] = React.useState(false);
    const [titleVal, setTitleValue] = React.useState(false);
    const [typeVal, setTypeValue] = React.useState(false);



    return (
        <div>
            <DungeonDetails>
                <div>{titleVal} : Dungeon Details</div>
                <div>
                    <p>ID: {idVal} </p>
                    <p>Title: {titleVal} </p>
                    <p>Type: {typeVal} </p>
                    <p><button>Close</button></p>
                </div>
            </DungeonDetails>
        </div>

    )
}

When I try passing the state values: idVal, titleVal, and typeVal to the DungeonDetails component, they show up as undefined.

So the only way I can figure out how to do it is like I have it working now.

But I was hoping I could pass the state values so that I don't have to have it look like it does now. So I can move the markup into the DungeonDetails component.

But I can't avoid the 'undefined' errors.

Is this possible?

Thanks!

Upvotes: 0

Views: 31

Answers (1)

mxsxs2
mxsxs2

Reputation: 949

I am not sure how have you tried to pass the props in but the following should work fine:

const DungeonDetails = ({ titleVal, idVal, typeVal}) => (

    ReactDOM.createPortal(
        <div id="portal_DungeonDetails">
            <div>{titleVal} : Dungeon Details</div>
            <div>
                <p>ID: {idVal} </p>
                <p>Title: {titleVal} </p>
                <p>Type: {typeVal} </p>
                <p><button>Close</button></p>
            </div>
        </div>,
        document.getElementById('portal-root')
    )
)




function DungeonEntries() {

    const [idVal, setIdValue] = React.useState(false);
    const [titleVal, setTitleValue] = React.useState(false);
    const [typeVal, setTypeValue] = React.useState(false);



    return (
        <div>
            <DungeonDetails
                 titleVal={titleVal}
                 idVal={idVal}
                 typeVal={typeVal}

            />
        </div>

    )
}

Upvotes: 1

Related Questions