Passing a component to another component in react

Question

I am creating a small library of component and I have a table component and my task is make it modular and generic so it can be modified later

Now Table by nature is a container component that is it can contain different various other small component that I am building in a library.

What I Want to Know?

Is the below approach correct way to pass component to other component? if not than what is the correct way or better way of doing it?

What I am Doing

table have many props but 3 main props are :

colName which is an array of string passing the table column name of each column

data is an array which contains array for each row.

dataComponent (remains undefined if you want to display data as normal text data) which is an array of component(the one's which I defined in the library) to be used for a specific column for each row

Too Much of talk about row and column and code

Now Here is The sample code:

     const User = [
          <React.Fragment>
            <span className="userinfo">
              <MUserIcon user_name={"dummy1"} profile_type={"facebook"} />
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.facebook.com"}
                link_content={"dummy1"}
              />
            </span>
          </React.Fragment>,

          <React.Fragment>
            <span className="userinfo">
              <MUserIcon user_name={"dummy2"} profile_type={"instagram"} />
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.instagram.com"}
                link_content={"dummy2"}
              />
            </span>
          </React.Fragment>,

          <React.Fragment>
            <span className="userinfo">
              <MUserIcon
                user_name="imawebdev"
                profile_type="linkedin"
                user_img_src={pro_pic}
              />,
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.linkedin.com"}
                link_content={"imawebdev"}
              />
            </span>
          </React.Fragment>
        ];






return (
          <div className="App">
            <MTable
              title="Demo Table"
              colsName={["Account Name", "Queued", "Errors"]}
              data={[["imawebdev", 5, 0], ["dummy1", 4, 3], ["dummy2", 4, 0]]}
              dataComponent={[User]}
            />
          </div>
        );
      }

The above code has a dataComponent that passes component for colName "Account Name" which is composed of user avatar component(which I built as a part of the library) called MUserIcon and same can be said for MLink which is a hyperlink component.

Answer 1

In React you can use child components. Instead of using your dataComponent prop, you could structure it like this:

<MTable /* props here */>
   {User}
</MTable>

And then, in MTable, instead of using props.dataComponent, you can use props.children, which will still give you your User all the same.

You can also define User as a component itself, so it would look a bit more consistent:

const user User = () => [ /* your array of fragments here */ ]

<MTable /* props here */>
   <User />
</MTable>