[Recompose] Lock Props using Recompose -- withProps

Posted 2020-09-18 Answer1215

Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden.

 

const { Component } = React;
const { withProps } = Recompose;

// with function as arguement
const HomeLink = withProps(({ query }) => ({ href: ‘#/?query=‘ + query }))(‘a‘);
// take object as arguement
const ProductsLink = withProps({ href: ‘#/products‘ })(‘a‘);
const CheckoutLink = withProps({ href: ‘#/checkout‘ })(‘a‘);

const App = () =>
  <div className="App">
    <header>
      <HomeLink query="logo">Logo</HomeLink>
    </header>
    <nav>
      <HomeLink>Home</HomeLink>
      <ProductsLink>Products</ProductsLink>
      <CheckoutLink>Checkout</CheckoutLink>
    </nav>
  </div>;

ReactDOM.render(
  <App />,
  document.getElementById(‘main‘)
);

 

withProps, take string as arguement for creating a new DOM element.