Undefined error when passing props to children React

Question

I'm following this question to learn how to pass props to children. I'm getting an error in my own components, though.

Component 1, DataWrapper:

export default function DataWrapper(props) {
  return (
    <DashboardWrapper>
      {cloneElement(props.children, { test: "hello there" })}
    </DashboardWrapper>
  );
}

Component 2, Migration:

export default function Migration(props) {
  console.log("props.test");
  console.log(props.test);
  return (
    <DataWrapper>
      <div>hello</div>
    </DataWrapper>
  );
}

I'm trying to pass the test prop from DataWrapper to Migration. However, I'm getting undefined when running console.log(props.test);. Am I passing the test prop incorrectly? What must I do to successfully pass props to children?

You have to pass it like this. Then in your child component, You'll get in props. — ghayoornaqvi, Sep 03 '21 at 13:04
You cannot pass props from `DataWrapper` to `Migration` because `DataWrapper` is a child `Migration`. Props can only flow *down*. You are currently passing `test` to the `div` which is the child of `DataWrapper`. — Felix Kling, Sep 03 '21 at 13:07

score 1 · Accepted Answer · answered Sep 03 '21 at 13:09

Your structure suggests that you are including

<Migration>
  <DataWrapper>
    <DashboardWrapper>
      cloneElement()
    </DashboardWrapper>
  </DataWrapper>
</Migration>

so the outside Migration Object does not get any props from the DashboardWrapper function cloneElement().

If your structure is different, try to elaborate the complete structure in your question.

Undefined error when passing props to children React

1 Answers1