Pass React Component as Props

Pass react component as props

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' />} />

After all, properties in React are just regular JavaScript object properties and can hold any value - be it a string, function or a complex object.

How to pass props to a component passed as props in React?

you can pass the component type and props in two different properties

<Foo component={Bar} componentProps={...} />

then in Foo component, you do this

 render() {
    const Component = this.props.component;
    const props = this.props.componentProps;
    return <div> ... <Component {...props}/> ...</div>
 }

or you can pass a function that renders you component like this

<Foo component={() => <Bar props />}/>

then in Foo component, you do this

 render() {
    return <div> ... {this.props.component()} ...</div>
 }

or you can do as you suggested in the question like this

<Foo component={<Bar props/>}/>

then in Foo component, you do this

 render() {
    return <div> ... {this.props.component} ...</div>
 }

its all depend on how you will use the passed component in Foo component, or in your case the Field component

Add props to a React component passed as a prop?

Basically, you need to pass a function as props instead of JSX.
Here is a sample code

//App.js
import React from "react";
import "./App.css";
import SplitPane from "./SplitPane";
import Contacts from "./Contacts";
import Chat from "./Chat";

function App() {
  const ModifiedContact = (style) => <Contacts style={style} />;
  const ModifiedChat = (style) => <Chat style={style} />;

  return (
    <div>
      <SplitPane left={ModifiedContact} right={ModifiedChat} />
    </div>
  );
}

export default App;

//Chat.js
import React from "react";

const Chat =(props)=> {
  return (
    <div className={props.style}>
      Hi Im chat
    </div>
  )
}

export default Chat;

//Contacts.js
import React from "react";

const Contacts =(props)=> {
  return (
    <div className={props.style}>
      Hi Im contacts
    </div>
  )
}

export default Contacts;

//SplitPane.js
import React from "react";

const SplitPane = (props)=> {
  const contactsStyle = "new-Class";
  const chatStyle = "chat-Style";
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left(contactsStyle)}
      </div>
      <div className="SplitPane-right" >
        {props.right(chatStyle)}
      </div>
    </div>
  );
}

export default SplitPane;

//App.css
.chat-Style {
  color: rgb(10, 10, 10);
  background-color: rgb(207, 27, 27);
  text-align: center;
}

.new-Class {
  color: #fff;
  background-color: #888;
  text-align: center;
}

Passing props from one class component to other in react js

By extending React.Component, React does this for you.

The props object should never be changed inside the receiving component. React class components will gather all the arguments you pass to a component, and refer to them by the common name "props". This is why you don't have to do it yourself, in the constructor.

However, in modern React, class components are rarely used. The reason is that class components easily ends up with complicated lifecycle management.

The Header component, written as a function rather than a class, would look like this:

const Header = (props) => (
  <div>
      <p>Welcome, {props.username}</p>
  </div>
)

It is also very common to destructure props directly, so that you never really access the props object, like this:

const Header = ({username}) => (
  <div>
      <p>Welcome, {username}</p>
  </div>
)

In the case of function components, you're free to use whatever name you want for the props. I wouldn't do it though, because people are used to props being called props. But this would work as well:

const Header = (params) => (
  <div>
      <p>Welcome, {params.username}</p>
  </div>
)

How can I pass React props in audio player?

You need to change your const function parameter so it knows its looking for props

const AudioPlayer = ({sourceFile}) => {...

How to pass a generic type in a React component props

After I have read the official typescript documentation I would suggest the following:

function MyComponent<T>(props: {
  options: {
    label: string;
    value: T;
  }[];
}) {
  return <div>MyComponent</div>;
}

type DominantHand = "RIGHT" | "LEFT";

function ParentComponent() {
  return (
    <MyComponent<DominantHand>
      options={[
        { label: "Right Hand", value: "RIGHT" },
        { label: "Left Hand", value: "LEFT" },
      ]}
    />
  );
};

---

Related Topics