pass props between unrelated components- react

Question

I have a HeadingComponent that shows page heading inside an h2 tag like so:

<div id="id1">
      <h2 className="class1">{headingText}</h2>
 </div>

This HeadingComponent is inside a parent div that has other components and divs embedded. ComponentThatDecidesHeading1, ComponentThatDecidesHeading2, ComponentThatDecidesHeading3 are the components that will decide what should be the {headingText} i.e.

<div id="layoutContentArea">
              <HeadingComponent headingText={headingText}/>
               <div or some wrapper component>
                     <ComponentThatDecidesHeading1/>
                     OR
                     <ComponentThatDecidesHeading2/>
                     OR
                     <ComponentThatDecidesHeading3/>
                  </div>
             </div>

So, if ComponentThatDecidesHeading1 is rendered, headingText= 'Heading 1', if ComponentThatDecidesHeading2 is rendered, headingText = 'Heading 2' and so on.

Is there a way to put an "if" condition or something that checks which component is rendered and based on that display the corresponding headingText? Or Pass headingText from, , and fetch that in .

I checked ReactJS Two components communicating, Pass props to parent component in React.js, but didn't get my answer.

Any ideas?

who chooses which heading to render? Is it done by the user? — Dhiraj, Mar 07 '17 at 08:20
Why not make a component - `ComponentThatDecidesHeading` and pass in the props as required to determine the component/heading? — Nevin Madhukar K, Mar 07 '17 at 10:33
@Dhiraj- the presence of components "ComponentThatDecidesHeading1", "ComponentThatDecidesHeading2" etc. decides the heading. As I mentioned, if the component that is currently rendered is "ComponentThatDecidesHeading1", then the heading will be "Heading 1" , so on and so forth. "HeadingComponent" is the component that shows that heading inside its "h2" tag. — abhi, Mar 07 '17 at 17:34
@Nevin Madhukar K- I didn't fully understand from your answer, where exactly in the DOM structure will that "ComponentThatDecidesHeading" lie. If this component is not a direct sibling of "HeadingComponent", then how to pass props between these 2 components? — abhi, Mar 07 '17 at 17:36

Nate Kimball · Accepted Answer · 2017-03-07T18:11:24.723

You can create a function that's called within your render() function to conditionally render the component you want while also setting your heading text. I'm assuming here that you have a "ComponentThatDecidesHeading" component that receives different props from somewhere else. If that's the case, something like this would work (EDITED to respond to your inquiry):

// Elsewhere in your app:

const propsForMyHeadingComponents = [
{ 
   id: 1,
   headingText: 'HeadingText 1',
   data: [thing1, thing2...]
},
{ 
   id: 2,
   headingText: 'HeadingText 2',
   data: [otherThing1, otherThing2, ...]
},
etc...
];

// Meanwhile, in your parent component:

grabDataAndHeadingText(){
  let headingText;
  let component;

  // Assuming the info you need to load into your components is passed in 
  // from a parent or from a store like Redux:
  const { propsForMyHeadingComponents } = this.props;

  // From there, you can iterate through your array to select the data for the component you want:
  propsForMyHeadingComponents.forEach(thisHeader => {
    if(condition-to-determine-which-component-to-load === thisHeader.id){
      headingText = thisHeader.headingText;
      data = thisHeader.data;
  });
   
  return { data, headingText };
}

render(){

  const { data, headingText } = this.grabDataAndHeadingText();

  // Again, assuming "ComponentThatDecidesHeading" is the same component 
  // with changing props:

  return(
    <div id="layoutContentArea">
      <HeadingComponent headingText={ headingText }/>
        <div or some wrapper component>
            <ComponentThatDecidesHeading data={ data } />
        </div>
    <div>
  );
}

You could always get & set headingText and component variables to state, as well.

If you literally have 100 separate components that each have their own set of unique logic, etc... , you can store the component's name in your "propsForMyHeadingComponents" array. Otherwise, just load your component with the props you want to render it with as outlined above.

Thanks Nate. Yes, I am going to have a lot of components (may be 100) that decide heading. Could you share the other method as well please? — abhi, Mar 07 '17 at 17:20
It worked. Like you said, all my "components that decided heading" were different from each other (had their own unique logic etc.). So, I used your approach with slight modification. const compWithNextPage = [ { currentPage: 'abc', nextPage: 'xyz', headingText: 'headin1', bodyContent: }, { currentPage: 'def, nextPage: 'ghi', headingText: 'heading2', bodyContent: }, ] — abhi, Mar 08 '17 at 17:53

pass props between unrelated components- react

1 Answers1