Bonjour à tous, je suis nouveau sur developpez.com, et je voudrait faire un date picker react sur un projet Synfony.

Je suis parvenu tout d'abord afaire des composant React avec https://headlessui.com/.

Maintenant avec ce tuto,
https://reactjsexample.com/airbnb-st...lt-with-react/

je voudrait faire un date picker.

J'ai donc fait le:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
npm i @bcad1591/react-date-picker
puis j'ai créer un fichier Calandar.jsx dans le fichier assets/controller, la ou mes précédant script fonctionne.

dont voici le code
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React from 'react';
import { createRoot } from 'react-dom/client';
 
import {
  DatePicker,
  DatePickerProvider,
  useDatePickGetter,
  useDatePickReset,
} from '@bcad1591/react-date-picker';
 
const container = document.getElementById('root');
const root = createRoot(container);
 
function App() {
  const { pickedDates } = useDatePickGetter();
 
  const resetFunc = useDatePickReset();
 
  return (
    <div>
      <DatePicker disablePreviousDays />
      <hr />
      <div>{pickedDates.firstPickedDate?.toString()}</div>
      <div>{pickedDates.secondPickedDate?.toString()}</div>
      <button type="button" onClick={resetFunc}>
        Reset
      </button>
    </div>
  );
}
 
root.render(
  <DatePickerProvider>
    <App />
  </DatePickerProvider>,
);
Dans le twig, la ou ca diffère dans du react normal je met la ligne:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<div {{ react_component('Calandar') }}></div>
Puis je compile avec npm run build

et je n'ai pas d'erreur.

Quand le lance la page je n'ai rien qui apparait et dans le code source de la page je trouve bien la balise
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<div data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="Calandar"></div>

Merci de votre aide!
Cordialement