How do I pass in a component to a component in react js?

Question

What I want to be able to do is pass in another component that would replace the buttons using this syntax.

<EmailDrop>
   <AnotherComponent />
</EmailDrop>

I imagine there must be a way to do this but I am struggling to even know what to google to find out. Do I pass a function into it as a prop?

I feel like I am missing something really basic.

import React, { Component } from 'react';

class EmailDrop extends Component {
    constructor() {
        super();

        this.state = {
            showMenu: false,
        };

        this.showMenu = this.showMenu.bind(this);
        this.closeMenu = this.closeMenu.bind(this);
    }

    showMenu(event) {
        event.preventDefault();

        this.setState({ showMenu: true }, () => {
            document.addEventListener('click', this.closeMenu);
        });
    }

    closeMenu(event) {

        if (!this.dropdownMenu.contains(event.target)) {

            this.setState({ showMenu: false }, () => {
                document.removeEventListener('click', this.closeMenu);
            });

        }
    }

    render() {
        return (
            <div>
                <button onClick={this.showMenu}>
                    Show menu
                </button>

                {
                    this.state.showMenu
                        ? (
                            <div
                                className="menu"
                                ref={(element) => {
                                    this.dropdownMenu = element;
                                }}
                            >
                                <button> Menu item 1 </button>
                                <button> Menu item 2 </button>
                                <button> Menu item 3 </button>
                            </div>
                        )
                        : null
                }
            </div>
        );
    }
}

export default EmailDrop

Unrelated, but you don't need manually created event listeners in React. — jmargolisvt
– jmargolisvt, Commented May 9, 2020 at 3:02
Does this answer your question? Why won't my nested React components render? — Brian Patterson
– Brian Patterson, Commented May 9, 2020 at 3:13

wentjun · Accepted Answer · 2020-05-09 03:20:31Z

1

You can pass down child components through a parent component using the children props. In this scenario,

<EmailDrop>
  <AnotherComponent />
</EmailDrop>

AnotherComponent is part of the children props of EmailDrop, and therefore, when you are working on the component logic for EmailDrop, you can actually access AnotherComponent and conditionally render it if it exists:

render() {
  const { children } = this.props;  

  return ( 
    <>
      {
        children 
         ? children 
         : <Buttons /> 
      }
    </>
  )
}

answered May 9, 2020 at 3:20

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I pass in a component to a component in react js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related