CODEWITHSUNDEEP
reactjsgatsby
Matthias Güntert
Matthias Güntert

Reputation: 4640

Passing parameters to a react component

Consider the following component.

import React from "react"

const AlertBox = ({ type, content }) => {
    if (type === "tip") {
        return (
            <div className="alert is-tip">
                <p className="alert-title">Tip</p>
                <p>{content}</p>
            </div>
        )
    }

    if (type === "important") {
        return (
            <div className="alert is-important">
                <p className="alert-title">Important</p>
                <p>{content}</p>
            </div>
        )
    }
}

export default AlertBox

This allows me (by using gatsby-plugin-mdx) to use it like this:

<AlertBox type="important" content="This is my very important note" />

Okay great. But what I really want is to use it like this:

<AlertBox type="important">
    This is my very important note
</AlertBox>

How would I pass this to the component?

Upvotes: 1

Views: 28

Answers (1)

Lakshya Thakur
Lakshya Thakur

Reputation: 8308

You can use children props.

import React from "react"

    const AlertBox = ({ type,children }) => {
        if (type === "tip") {
            return (
                <div className="alert is-tip">
                    <p className="alert-title">Tip</p>
                    <p>{children}</p>
                </div>
            )
        }

        if (type === "important") {
            return (
                <div className="alert is-important">
                    <p className="alert-title">Important</p>
                    <p>{children}</p>
                </div>
            )
        }
    }

    export default AlertBox

Upvotes: 1

Related Questions