CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-props
mmz
mmz

Reputation: 1151

Undefined error when passing props to children React

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?

Upvotes: 0

Views: 142

Answers (1)

Christian
Christian

Reputation: 4641

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.

Upvotes: 1

Related Questions