将数据从父 class 传递给子 function -props undefined

Question

I'm trying to pass data 'template_titles' to my child component and display them in an option dropdown. Just trying to console.log the data to make sure it's passing. Currently running into an issue where property props are undefined.

Parent Component

    render() {
    if (!this.props.show) {
        return null;
    }

    const template_titles = this.state.email_template.map((a) => a.title);
    console.log(template_titles);

    return (
        <div className='compose-email'>
            <div className='directory'>
                <div className='background' />
                <div className='box'>
                    <ion-icon
                        id='close-email'
                        name='close'
                        onClick={this.onClose}
                    ></ion-icon>
                    <ion-icon
                        id='square-email'
                        name='square'
                        onClick={this.onClose}
                    ></ion-icon>
                    <h1 className='candidate-name-compose-email'>
                        Candidate Name
                    </h1>
                    <hr></hr>
                    <h1 className='compose-email-title-compose-email'>
                        Compose Email
                    </h1>
                    <ComposeEmailForm
                        handleCompose={this.sendNewEmail}
                        template_titles={this.template_titles}
                    />
                </div>
                <ToastContainer className='toast-container' />
            </div>
        </div>
    );
}

Child Component

    export default function ComposeEmailForm({ handleCompose }) {

console.log(this.props.template_titles);

return (
    <div className='container'></div>
);

}

Answer 1

Try this instead:

export default function ComposeEmailForm({ handleCompose, template_titles }) {

console.log(template_titles);

return (
    <div className='container'></div>
);

You can't use this when your component is a function and not a class.

And when passing it, you need to drop the this too:

 <ComposeEmailForm
    handleCompose={this.sendNewEmail}
    template_titles={template_titles}
 />

since you define it as such in your render function.

Answer 2

Actually, in the function component, you don't too use this , especially when you destruct props in the parentheses of the argument, then you can access to you props like below:

export default function ComposeEmailForm({ handleCompose, template_titles }) {

  console.log(template_titles, handleCompose);

  return (
    <div className='container'></div>
  );
};