I have a parent and child component in a Laravel app and would like to render a TextInput for each element in the array.

However, I’m having trouble passing data from the parent to the child. It appears that it’s a lifecycle issue based on how the logs are behaving, but I’m not sure.

How can I pass the data between the components and display the data on the page?

[{
    "array_key_1": "text 1",
    "array_key_2": "text 2",
}, {
    "array_key_1": "text 3",
    "array_key_2": "text 4",
}]

Parent

public function mount($record): void
    {
        $this->array = $this->record->some_array;
        Log::info('data', $data); // returns values
    }

public function form(Form $form): Form
    {
        return $form
            ->schema([
                  DisplayForm::make($this->array);
            ])
    }

Display Form

  public static function make(array $data): Component
  {
    Log::info('data', $data); // returns null
    return Repeater::make('conditions')
      ->schema([
        TextInput::make('array_key_1')
          ->label('array_key_1'),
        TextInput::make('array_key_2')
          ->label('array_key_2'),
      ])
      ->defaultItems(count($data))
      ->afterStateHydrated(function (Repeater $component, $state) use ($data) {
        $component->state($data);
      });
  }