Question

0

47

Views

How can i make component accepts elements inside?

I want to make a component but i want that one accepts elements too. For example :

Component :

const Example = () => {

    return (
        <div>
            //Some Elements will come here.
        </div>
    )
}

Another Page :

const App = () => {

    return (
        <Example>
            <div>
                <h1>Hello all </h1>
                <p>I want that elements acceptable on my custom component </p>
            </div>
        </Example>
    )
}

But i only can send props and i cant write anything inside of tags of my component. How can i make it ? Thanks for all!

3 months ago ·

Juan Pablo Isaza

2 answers

Answer question

0

You can use props.children

const Example = props => {
    return <div>{props.children}</div>;
};

3 months ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-08T02:29:19.212Z

React defined a special prop called children. That's what you exacly need.

Try like this

const Example = ({ children }) => {
    return <div>{children}</div>;
};

const App = () => {
    return (
        <Example>
            <div>
                <h1>Hello all </h1>
                <p>I want that elements acceptable on my custom component </p>
            </div>
        </Example>
    );
};