Pass component as prop in reactjs

Active3 hr before
Viewed126 times

9 Answers


Stack Overflow en español,Using this.props.children is the idiomatic way to pass instantiated components to a react component, Meta Stack Overflow

Using this.props.children is the idiomatic way to pass instantiated components to a react component

const Label = props => <span>{props.children}</span>
const Tab = props => <div>{props.children}</div>
const Page = () => <Tab><Label>Foo</Label></Tab>

When you pass a component as a parameter directly, you pass it uninstantiated and instantiate it by retrieving it from the props. This is an idiomatic way of passing down component classes which will then be instantiated by the components down the tree (e.g. if a component uses custom styles on a tag, but it wants to let the consumer choose whether that tag is a div or span):

const Label = props => <span>{props.children}</span>
const Button = props => {
    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
    return <button><Inner>Foo</Inner></button>
const Page = () => <Button inner={Label}/>

If what you want to do is to pass a children-like parameter as a prop, you can do that:

const Label = props => <span>{props.content}</span>
const Tab = props => <div>{props.content}</div>
const Page = () => <Tab content={<Label content='Foo' />} />
load more v

We recommend that such components use the special children prop to pass children elements directly into their output:,Anything inside the <FancyBorder> JSX tag gets passed into the FancyBorder component as a children prop. Since FancyBorder renders {props.children} inside a <div>, the passed elements appear in the final output.,Some components don’t know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic “boxes”.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}    </div>
load more v

In this story we are going to see a simple technique that allows you to write friendly customizable components with simple APIs, just by using the basic React building blocks: the element.,In my experience, a seasoned React programmer uses this technique naturally, but a…

 Pretag team - issue, fix, solve, resolve

In the same way, you can pass any component as props in react. ,Let’s create two components and pass one component as props in another component.,We can pass component as props in React JS, it is very simple and easy. We can also pass props with components in React with the specified components. Here we are going to create one simple example to pass one component as props into another component. 

Let’s create two components and pass one component as props in another component.

<code>const ChildComponent = (props) => {
  return (

const ParentComponent = () => {
render() {

  const MyComponent = this.props.myComponent; 
    return (
         <MyComponent title = {this.props.title} /> 


const TestComponent = () {

return (
<ParentComponent  myComponent={ChildComponent} />


You might wonder, “How can you pass data up from a child component to a parent component?”,You can make a mistake and forget to pass a required prop into the component that needs it:,Prop drilling refers to passing props down the component layers until they reach the designated child component, while other higher components don’t actually need them.

 Pretag team - issue, fix, solve, resolve

Do you need to pass a React component down as a prop to a child component in TypeScript?,Want to pass React components down as a prop in TypeScript?Use React.ReactNode type definition. There's other ways, but this is a better solution.,Hey, here at Linguine Code, we want to teach you everything we know about React. Our only question is, are you in?

Use React.ReactNode to accept everything.

interface ParentCompProps {
  childComp?: React.ReactNode;

const ChildComp: React.FC = () => <h2>This is a child component</h2>

const ParentComp: React.FC<ParentCompProps> = (props) => {
  const { childComp } = props;
  return <div>{childComp}</div>;

function App() {
  return (
      <ParentComp childComp={<ChildComp />} />
      <ParentComp childComp={<h3>Child component 2</h3>} />
      <ParentComp childComp={(
        <div style={{border: '2px solid red'}}>
          <h4>Child component</h4>
          <p>With multiple children</p>
      )} />
load more v

 Pretag team - issue, fix, solve, resolve

To pass the state into another component, you can pass it as a prop.,Then, inside <ExampleComponent />, you can access the data as,To update the state in a parent component, you have to pass the data into the callback prop. Instead of giving the data or state into the callback prop, you can send it directly to an external method to complete a specific task. In this guide, you'll learn how to submit a component's state to an external method.

1class ParentComponent extends Component {
2    state = {
3        // ..
4    }
5    render() {
6        return <ExampleComponent data={this.state}>
7    }
load more v

React Props are like function arguments in JavaScript and attributes in HTML.,Props are passed to components via HTML attributes.,To send props into a component, use the same syntax as HTML attributes:

Add a "brand" attribute to the Car element:

const myelement =
<Car brand="Ford" />;
load more v

Other "reactjs-component" queries related to "Pass component as prop in reactjs"