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


Related Query

More Query from same tag