Getting Started

Props

Pass values from a template into a component

dead view
props

Key concepts

Any assign passed to react/1 becomes a prop, including plain Elixir maps — they cross to JavaScript as JSON, so %{name: "mrdotb", age: 30} arrives in React as {name, age}.

page_html.ex

defmodule MyAppWeb.PageHTML do
  use MyAppWeb, :html

  def simple_props(assigns) do
    ~H"""
    <.react name="SimpleProps" user={%{name: "mrdotb", age: 30}} />
    """
  end
end

How it works

The template hard-codes a map and hands it straight to the component. There is no state, no event and no socket — this example is only about values arriving as props from wherever the template is rendered.