liveBook · Manning

Higher-order component

As explained in Building User-Friendly DSLs

A React pattern in which a function accepts a component or component configuration and returns an enhanced or specialized component.

A higher-order component (HOC) is a function that accepts component configuration and returns a specialized React component. Here, inputValueComponent receives inputType and optional isValid parameters, then returns an observer-wrapped component sharing editing behavior. section 5.2

Specialized editable values

TextValue uses inputType: "text" without validation. NumberValue uses inputType: "number" and the isNumber validator, while both receive editState and share editing behavior.

How Building User-Friendly DSLs covers it

How deep it goes
Explains configuration, returned components, optional validation, and the completed refactoring, but not broader HOC design variations.
Examples
Uses TextValue and NumberValue, configured input elements, editState objects, and the isNumber validator.
What it assumes
Assumes familiarity with React component functions and JavaScript functions, while explaining optional validation from its logical behavior.
What you can do after
Apply via React and MobX by building reusable input components from named configuration and optional validation.
How it connects
Connects React components with JavaScript functions, MobX observers, and optional input validation.
Cover of Building User-Friendly DSLs
liveBookmanning.com
Read Building User-Friendly DSLs on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Building User-Friendly DSLs. The section links point to the parts of the book it draws on.