score:0
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.
Source: stackoverflow.com
Related Query
- pass props between unrelated components- react
- React pass props between sibling components with hooks
- How to pass props through a parent between two react components
- Pass props between components at the same level React js with hooks
- pass props between react components
- React router - pass props on routes to child components
- How to use setFieldValue and pass the value as props between components
- React pass props down to all descendant Components
- React Native: Passing props between components and componentWillMount() method
- How to pass objects and states between two components in React
- In how many ways we can pass props to all child components in react
- react how to pass props to inline css style in components
- Editable React table: pass data between components
- How to pass props to children components in React
- React how to pass onSubmit handler through props to the components
- How to pass the props value from the other sibling components in React JS
- How to pass props in React Components correctly?
- Pass props between three components
- Pass function between two child components in React
- Unable to pass data between components in react
- How to pass states between function components in React
- How to pass props between React Routes 4
- React + Typescript + Styled Components pass props to keyframes & conditioning
- React Native Navigation, how do you pass and use Props between Class Components?
- How to pass a set of React Nodes to unrelated components
- Passing props between react components
- How can I pass data between two React components, but the two components have no parent-child relationship?
- Pass props between components using state hook
- React Router Props of parent component refresh whenever I switch between children components
- How to pass (this) props to sibling components in React
More Query from same tag
- React Native - Super expression must either be null or a function
- Meteor + React - Session Variable not behaving reactively
- Multiple Exports From ReactJS Component Library
- Cannot read property 'setState' of null
- Use Parameterized Selector (Selector Factory) in React Functional Components with useSelector from React-Redux
- Array.map is not a function while the defined constant is array
- how to close hamburger menu in react class based component
- React loop through map and display components
- React - displaying images side by side
- how can ı handle react with firebase authentication problem?
- Close button in wrong position
- Redux can't organize my data base on theirs type
- Cannot get the first element of array whereas map() works as a charm
- React, avoid rerendering with shallowEqual
- How correctly to use interceptorce with axios + react
- Too many re-render problems with React
- Uploading a file in React redux firebase
- Material UI theme global Dense setting
- React functional component communication
- Problems while developing a reactjs app
- Display JSON objects list in a Grid with react-virtualized
- React warning message "Assign arrow function to a variable"
- testing object returned from useTranslation
- Try to display data using Mobx from API
- dispatch multiple actions with redux-observable
- how to only display the information with matched id inside map method
- A colorful SVG in plain HTML is all black in React. Why?
- External web service redirects the user and posts data to my callback URL. How do I render the posted data to the user in an Express/Next.js app?
- Typescript image import
- How do i get and apply today value with moment.js?(react.js)