score:2
Accepted answer
you can create a header component and pass dynamically to every component where needed by values.
header.js
function header({title,menus_json,logo_path,admin}){
return (
<header>
// use your title,menus_json,logo_path,admin
</header>
)
}
use like this in needed components - example
component1.js
function component1(){
return (
<div>
<header title="title" logo_path=[] admin=false
menus_json=[{'title':'tab1', 'route_path'='/tab1'}] />
<div>...</div>
</div>
)
}
component2.js with different values title
,menus_json
...etc.
function component2(){
return (
<div>
<header title="title2" logo_path=[] admin=false
menus_json=[{'title':'tab2', 'route_path'='/tab2'}] />
<div>...</div>
</div>
)
}
Source: stackoverflow.com
Related Query
- Ways of creating reusable header with react
- Creating reusable Button Component with React and Typescript with not assignable type error
- Creating a dynamic header UI with React and Material UI
- Cannot find namespace 'ctx' error when creating Context with react - typescript
- React Navigation Header in Functional Components with Hooks
- Hide header on StackNavigator with React Navigation in React Native
- React Material-Ui Sticky Table Header with Dynamic Height
- Header keys become lowercase when interacting with API - React native
- React table with static header on browser scroll
- Access vuforia vws with react forbidden header
- translate on Y using SectionList and header view creating empty space on scroll - react native
- React Navigation Header change with screen
- React creating dynamically refs with Typescript
- having an issue creating new react app with create-react-app
- Creating anchor with onClick that React handles
- Create React App with Storybook creating webpack issue
- Creating a (.NET 6 based) website project with ASP.NET Core and React (TypeScript) in Visual Studio 2022?
- React header component with slots
- creating dynamic component names in react with typescript 3.2.2
- Create 'global' header and footer with react
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Creating a basic form calculator with React js
- Reusable Dropdown with React Hooks
- creating common header and sidebar across all the page using react router
- Creating and manipulating components with react hooks
- Creating react library with rollup.js i get error null (reading 'useState')
- Header flickering and freezing issue with material table (implemented with react window + react window infinite loader)
- Creating A React Component That Can Be Shown With A Function Call (like react-toastify
- How can I make conditional Header with React
- React MUI Datagrid align column data and header with type "number"
More Query from same tag
- Is there anyway to push javascript console logs to sentry
- antd table: why record.key returns undefined when I have set the rowkey
- Why mapStateToDispatch is not sending the right value
- Issue importing an interface from ReactQuill namespace
- React-spring useSpring() prevents viewport size from updating when window is resized
- How to download file in Js?
- I have created a line Chart using d3.js in React. Need to do some customizations on it and not sure how to do. Please see the description and code
- Prevent props using propTypes
- Jest/Enzyme | Redux prop is not defined in test
- React - history.push not working after data fetch
- How to import csv file in reactjs and show the data on the screen?
- How to print child elements of mounted component in jest?
- React-Bootstrap table with firebase realtime database creates new table for each entry
- What is InjectedFormProps in redux-form?
- How to send url params from react to express api call
- set css with JSON array values
- I want to print data inside an array
- Dynamic dropdown list react axios get request
- Validate function returning undefined on error checking instead of true
- How to get the value from enum by a numeric key in React
- How can I make a conditional reduce call for an array of objects in React?
- Jsx is used without importing react
- How to load environment variables in React
- How do I use react router and react scroll on the same button?
- error - unhandledRejection: Error: Not supported at Object.react-markdown
- reactJS componentWillMount is run after render method
- How to render user list in React-Firebase
- Webpack cannot find keymirror module with Typescript import
- Change React build path post application build
- Login using Firebase and React JS