score:0

Accepted answer

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.


Related Query

More Query from same tag