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}.

SimpleProps.jsx

import React from "react";

export function SimpleProps({ user }) {
  return (
    <div>
      An example of how to pass a struct to React:
      {JSON.stringify(user)}
    </div>
  );
}

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.