pass component as prop in reactjs

Question

I thought it was simple but looks like I´m doing something wrong

const name = "Mike"
...
<MyComponent
    data={
        <Picture /> + " " + name
    }
/>

const Picture () => return <img src="..." />

const myComponent (props) => return props.data

i´m getting this output

[object Object] Mike

thank you!

Answer 1

You should separate the passing of both items into 2 different props, rather than joining them together (they are both different types - ReactNode, and string). The advantage of doing so is that there will be better type checking, especially if you are using TypeScript or PropTypes.

<MyComponent
  data={<Picture />}
  name={user.name}
/>

Then in the myComponent itself, you should do this if you are trying to print the name under the Picture.

const myComponent = ({ data, name }) => (
  <>
    {data}
    {name}
  </>
);

Answer 2

const Picture = () => <img alt="" src="" />;
const MyComponent = props => props.data;

export default function App() {
  return (
    const user = ...
    <MyComponent
      data={
        <>
          <Picture />
          {user.name}
        </>
      }
    />
  );
}

Any value should be passed thru {your value}

{user.name}

In this part of code, you shouldn't use return const MyComponent = props => props.data;

If you wanna return it in classic way write like this:

const MyComponent = props => {
    return props.data
};

Answer 3

You can check this example:

Parent Component

import React, {Component, useEffect, useState} from 'react';
import {ChildComp} from "./ChildComp";
import {Hello} from "./Hello";

export class ParentComp extends Component {

    render() {
        return (
            <div>
                <ChildComp>
                    <Hello/>
                </ChildComp>
            </div>
        );
    }
}

Child Component

import React, {Component, useEffect, useState} from 'react';

export class ChildComp extends Component {

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

Hello Component

import React, {Component, useEffect, useState} from 'react';

export class Hello extends Component {

    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
}

Answer 4

You can pass a component as a prop. However, look at this line:

<Picture /> + " " + user.name

Since <AnyComponent /> results in a React element, and a React element is internally represented as an object, you're essentially doing this:

{} + " " + user.name

which is why you're seeing [object Object] in your output. What you should do is

function MyComponent({ pictureElement, name }) {
  return (
    <div>
      {pictureElement} {name}
    </div>
  );
}