reason-react

reason-react

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›Record API (deprecated)

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX (Version 3)
  • Event
  • Style
  • Router
  • Working with DOM
  • Refs in React
  • ReasonReactCompat: migrating to 0.7.0 and JSX v3
  • Testing ReasonReact components

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context & Mixins
  • Custom Class/Component Property
  • Using Event Values With useState
  • Error boundaries

Record API (deprecated)

  • JSX (Old, Version 2)
  • Creation, Props & Self
  • Render
  • Callback Handlers
  • State, Actions & Reducer
  • Lifecycles
  • Instance Variables
  • React Ref
  • Talk to Existing ReactJS Code
  • cloneElement
  • Children
  • Subscriptions Helper
  • Router

FAQ

  • I'm Having a Type Error
  • Record Field send/handle Not Found
  • send/handle callbacks having Incompatible Types
  • I Really Need Feature X From ReactJS
  • Element Type is Invalid Runtime Error
  • I want to create a DOM element without JSX
Edit

Render

The Record API is in feature-freeze. For the newest features and better support going forward, please consider migrating to the new function components.

render needs to return a ReasonReact.reactElement: <div />, <MyComponent />, etc. Render takes the argument self:

/* ... */
    render: (self) => <div />
/* ... */

What if you want to return null from a render? Or pass a string to a DOM component like div which only allows ReasonReact.reactElements?

In ReactJS, you can easily do: <div> hello </div>, <div> {1} </div>, <div> {null} </div>, etc. In Reason, the type system restricts you from passing arbitrary data like so; you can only return ReasonReact.reactElement from render.

Fortunately, we special-case a few special elements of the type ReasonReact.reactElement:

  • ReasonReact.null: This is your null equivalent for render's return value. Akin to return null in ReactJS render.

  • ReasonReact.string: Takes a string and converts it to a reactElement. You'd use <div> {ReasonReact.string(string_of_int(10))} </div> to display an int.

  • ReasonReact.array: Takes an array and converts it to a reactElement.

← Creation, Props & SelfCallback Handlers →