score:1
Accepted answer
the only way that i use hoc was with class. something like this will help you
function higherordercomponent(props) {
return (<div style={{color: props.color}}>this is the main component</div>)
}
const customwithstyle = style => wrappedcomponent => {
class hoc extends react.component{
render = () => (<wrappedcomponent color={style}></wrappedcomponent>);
}
return hoc;
};
const styledcomponent = customwithstyle("red")(higherordercomponent);
reactdom.render(<styledcomponent />, document.queryselector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
score:0
use props.props within your higherordercomponent functional component for value of color attribute in button material component
Source: stackoverflow.com
Related Query
- How to write a HOC in react which takes another hoc?
- how to create common helper class in React JS using ES6 which is used by another component?
- How to properly write a custom react hook which depends on a value?
- How to map an array which is inside another array in react js?
- how to write react hook HOC
- How to write HOC for React Apollo Query component in TypeScript?
- How to render multiple component which parent are wrapped into another multiple element in react router v6
- How to call external function which return the json and call from react another component?
- How I can create a simple React component rendered as a <div> which takes a text value and a foreground color as input
- How to write JS which working on single page of react router at project created create-react-app
- How to write a test which should not find a test id in React Testing Library?
- React - How to call a function which is inside another callback function
- React - How can I pickup component which one I want in to another module
- How do I type the props for a HOC which will wrap react router's Route component
- How to pass in a react component into another react component to transclude the first component's content?
- How to set the DefaultRoute to another Route in React Router
- How can I render HTML from another file in a React component?
- React - how to pass state to another component
- How to query by text string which contains html tags using React Testing Library?
- how to navigate from one page to another in react js?
- React & Jest, how to test changing state and checking for another component
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- How can I write an else if structure using React (JSX) - the ternary is not expressive enough
- How to write test case for ErrorBoundary in React using Jest / Enzyme
- How to pass a state className variable to another component in react
- How to get refs from another component in React JS
- React Hooks with React Router v4 - how do I redirect to another route?
- How to handle/chain synchronous side effects that depend on another with React hooks
- React how to update another component's state?
- How to test whether a React Component contains another component with jest?
More Query from same tag
- DC.JS Scrollable Rowchart with no gap in React
- How to require an image with react electron outside of src folder(Application Support)
- How to use props type from a styled component?
- Click on radio button and display the corresponding value inside the radio button as selected in react js material UI design
- How to add event listener to a ref?
- document.createElement does not work as expected in componentDidMount in React?
- Formik with react-day-picker
- Why is onClick function being called upon Render in one situation but not the other situation
- How to get a new instance of an exported object on each import?
- Unable to change dropdown value in React child component
- Python Falcon and Axios: Unable to allow CORS
- Meteor Methods insert not working (mongodb)
- React- How to pass props between two different Microfrontent component
- How to get actual Dom node with React.useRef ? Element.getBoundingClientRect() not working on useRef variable
- useEffect run count with dependency list
- How to set value to only one argument in the method using javascript?
- Multiple Bootstrap React components in one Bootstrap Row
- Add/remove state array item immutably
- Issue with Jest and Enzyme
- How do I import into the server.js of expressjs
- Spread operator for props are not passing to component
- React delay button event for 2 seconds
- React Material-Table how to pass rowData argument?
- Accessing and showing modal located in another component
- React+Jest - Testing async components and waiting for mount
- React - passing a function two doors down, with parameters
- How to navigate based on state using react router
- useEffect - prevent unnecessary execution
- Material UI Card Height
- How should I transfer a wheel or scroll event from one element to another?