Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

154
Views
If I wrap a react components in one big react component will they share props

I want to share props between all components but with a wrapper component For example:

const name = "Test"
return (
    <Wrapper myprops={name}>
      <Image/>
      <House/>
    </Wrapper>
)

So can I get the myprops from Image and House?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Context API is used to share data between components in different nesting levels, you can read this from React doc:

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

For your case, your components Image and House are at the same level. Instead, you can use the composition and pass the props to your inner children like this:

import React, { cloneElement } from 'react';
import './style.css';

export default function App() {
  const name = 'Test';

  return (
    <Parent>
      <Wrapper myprops={name}>
        <Image />
        <House />
      </Wrapper>
    </Parent>
  );
}

function Parent({ children }) {
  return children;
}

function Wrapper({ children, ...props }) {
  return <>{children.map((child) => cloneElement(child, { ...props }))}</>;
}

function Image(props) {
  console.log(props);
  return <div>Image</div>;
}

function House(props) {
  console.log(props);
  return <div>House</div>;
}

This is a simple demo: https://stackblitz.com/edit/react-szxqwg

about 4 years ago · Juan Pablo Isaza Report

0

The answer of @Soufiane Boutahlil is legit, But you are missing a key prop. Otherwise, React will go mad at you.

function Wrapper({ children, ...props }) {
  return <>{children.map((child, i) => 
           <React.Fragment key={i}>
             cloneElement(child, { ...props }))
           </React.Fragment>}
         </>;
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!