Organisation de mon code

Alors la tu as modifié l'instance de Societe invoquée par ManagedSociete
Du coup pour voir la différence il faudrait que ta vue passe par ManagedSociete qui afficherait le composant global Societe

const listSociete = this.societes.map(societe => <Societe key={societe.id} societe={societe} />) // key ce n'est pas un argument de ton component, c'est pour dire a react qu'il y'a une liste de societes et qu'il n'a pas besoin de paniquer (parce qu'il va paniquer en voyant une liste du même component :p)

return (
    <>
        <div>blabla</div>

        { $listSociete }

        <div>blabla</div>
    </>
)

Grossièrement ce serait ça dans le render de managedSociete

Ensuite ManagedSociete devrait plutot être une page (SocietesPage), alors que Societe devrait juste etre des components

Merci Popotte pour ta réponse rapide,
si je fais de ManagedSociete une page, je vais devoir annuler SocieteForm et je pense que le problème restera le même (gros formulaire avec beaucoup de code)
j'ai fais des lectures où on parle de Contexte, et aussi de Redux. Ma solution peut-elle s'y trouver? et si oui, est-ce que Redux est approprié pour garder de nombreuse grosses listes de données d'application qu'on va partager sur plusieurs pages de l'application?

Avec plaisir ;)

Alors non tu n'as pas besoin de mettre directement le from dans la page, ta page peut appeler la form exportée dans un component

return (
    <>
        <SocieteForm args={args} />
    </>
)

Et c'est plié :p

Alors Redux c'est une solution, tu récupères les données depuis la base de données et voila

Mais ce serait plus simple de passer par NextJS (en gros c'est la version "framework" de ReactJS (React c'est une librairie à implémenter dans un autre framework à la base))

Je viens partager avec vous la suite de mon problème.
J'ai atteint mon objectif en définissant dans mon fichier ManagedSociete.tsx ainsi

import {ISociete} from "./ISociete";

/**je fais ma liste une variable globale**/
 export const societes=new Array<ISociete>();
export class ManagedSociete{
    private societe:ISociete;

    saveSociete(societe:ISociete){
        this.societes.push(societe)
    }

    getSocietes():Array<ISociete>{
        return this.societes;
    }

}

Je rappelle que mon objectif était de sortir la logique applicative de mes composant pour être capable de changer les composant plus tard sans toucher à cette logique forcement.
Alors peut-être je m'y prend mal en tant que débutant react. J'aimerai encore avoir votre point de vue là.
Merci.

Hello,

C'est quelques chose que je n'ai pas encore rencontré malgré beaucoup de lecture concernant le sujet React.

Je penses que ton approche peut fonctionner, meme si pour ma part je passerai tout en fonctionnel.

En revanche comme popotte pour moi ManagedSociete devrait être une page et c'est ici que la logique applicative ce fera.

par exemple si je reprend t'es lignes de codes.

Je transformerai les choses comme ceci. ( après faut voir comment est ta vue, cela ne conviendra peut être pas )

import React, {useCallback} from "react";
import {ISociete} from "./ISociete";

export const ManagedSociete = () => {
    const [societes, setSocietes ] = useState<ISociete[]>([])

    const saveSociete = useCallback((societe:ISociete) => {
       setSocietes([...societes, societe])
    },[])

    return (
        <>
            <SocieteForm saveSociete={saveSociete}/>
            <SocieteList societes={societes} />
        </>
    )
}

export default function SocieteForm({saveSociete}){
    const {register, handleSubmit}=useForm<ISociete>();

    return(
        <div className="form_societe" onSubmit={handleSubmit(saveSociete)}>
            <h1>Formulaire société
                <Button className="menu-list" component={Link} to="/societe/list"
                 >Voir la liste</Button>
            </h1>
            <form className="fomulaire " >
                <Grid container spacing={2} justifyContent="space-between">
                    <Grid item md={10} xs={10}>
                        <TextField label="Désignation" variant="filled" color="primary" focused
                        fullWidth  {...register("name")}/>
                    </Grid>
                    <Grid item md={2} xs={2}>
                        <TextField label="Forme Juridique" variant="filled"
                                   fullWidth {...register("formeJuridique")} />
                    </Grid>
                    <Grid item  >
                       <Button variant={"contained"} type={"submit"}>Enregistrer</Button>
                    </Grid>
                </Grid>
            </form>
        </div>
    )

export default function SocieteList({societes}){

    const columns:GridColDef[]=[
        {field:"id", headerName:"Id", width:50},
        {field:"name", headerName:"Raison social", width:150}
    ];

    return(
         <div className="form_societe">
             <h1>Liste des sociétés <Button className="menu-list" component={Link} to="/societe/form">Revenir au formulaire</Button></h1>
            <DataGrid
                 columns={columns}
                 rows={societes}
                 autoHeight={true} 
             />
         </div>
    )

Au pire si ça te dérange d'avoir des composants dans ManagedSociete, tu fais un custom Hooks

import React, {useCallback} from "react";
import {ISociete} from "./ISociete";

export const useManagedSociete = () => {
    const [societes, setSocietes ] = useState<ISociete[]>([])

    const saveSociete = useCallback((societe:ISociete) => {
       setSocietes([...societes, societe])
    },[])

    return {societes, setSocietes, saveSociete}
}

et apres tu l'invoque la ou tu en a besoin et ta logique applicative reste aussi au meme endroit.

exemple

import {useManagedSociete} from "../hooks"

export default function SocieteList(){

    const {societes} = useManagedSociete()

    const columns:GridColDef[]=[
        {field:"id", headerName:"Id", width:50},
        {field:"name", headerName:"Raison social", width:150}
    ];

    return(
         <div className="form_societe">
             <h1>Liste des sociétés <Button className="menu-list" component={Link} to="/societe/form">Revenir au formulaire</Button></h1>
            <DataGrid
                 columns={columns}
                 rows={societes}
                 autoHeight={true} 
             />
         </div>
    )