React, props don't render

Question

i have this problem that 'paragraphText' and 'paragraphLinkText' don't render. I'm learning so i will be thankful for an explanation.

export default function Modal({open, onClose}, props) If i change positions of {open, onClose} and props then the methods don't work so it's probably that but i have no idea why.

console.log(open) console.log(props) : true, Object { }

import React, {useState} from 'react'
import './css/header.css'
import Modal from './Modal'

export default function Header(){
    const [isOpen, setIsOpen] = useState(false)
    return(
        <div className='header'>
            <div className='Sign In'><h1 onClick={() => setIsOpen(true)}>Sign In</h1></div>
            <Modal open={isOpen} onClose={() => setIsOpen(false)} paragraphText="Already have an account?" paragraphLinkText="log in"></Modal>
        </div>
    )
}

import React from 'react'
import ReactDom from 'react-dom'
// import classes
import SignIn from './SignIn'
// import css
import './css/modal.css'
// import rest
import { FaTimes } from 'react-icons/fa'
import { IconContext } from "react-icons";

export default function Modal({open, onClose}, props){
    console.log(open)
    console.log(props)
    if(!open) {return null}


    return ReactDom.createPortal(
        <div className='modal-overlay'>

            <div className="modal-inside" id="modal-signin">

                <div className="close-modal-box-top">
                    <IconContext.Provider value={{size:"1em", style: { verticalAlign: 'bottom' } }}>                
                        <div className="close-modal" onClick={onClose}><FaTimes /></div>
                    </IconContext.Provider>   
                    <h2>sign in</h2>
                    <div></div>

                </div>
                <SignIn />
                <button>submit</button>
                <div className='loginP'><p>{props.paragraphText}</p><p>{props.paragraphLinkText}</p></div>

            </div>

        </div>,
        document.getElementById("portal")
    )
}

Answer 1

The problem has to do with destructuring and no necessarily with React in the following line:

export default function Modal({open, onClose}, props){

you are receiving two parameters {open, onClose} and props.

React component received all the props in the first parameters therefore if you want to get props in the second parameter there will never be there.

The solution is to spread the rest of the props so you can grab everything else that has been pass down from the top:

export default function Modal({open, onClose, ...props}){

then you will have access to all the props that have been pass down from the top component.

An alternative method for the previous solution you can do:

export default function Modal(props){
  const {open, onClose, paragraphText, paragraphLinkText} = props;
}

which I consider is more readable.

Add a comment if you have questions about this explanation.