Bonjour,

Je précise au cas où, je suis sur du Symfony du coup ma page est en twig au départ:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
{% extends 'layouts/base.html.twig' %}
 
{% block body %}
    <div id="reactApp"></div>
{% endblock %}

Ceci permet initier mon application React, donc le header et le footer de la page sont également en twig et ne changent pas.

Après avoir fait mon ReactDOM.render(<HelloApp />, document.getElementById('reactApp'))Je démarre ma page d'accueil comme ceci:
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class HelloApp extends React.Component 
{  
    render() {
        return <>
                <div className="form-group my-5">
                    <FormResearch />
                </div>
                <CardList />
            </>
 
    }
}
 
export default HelloApp

Qui fonctionne bien: un champ de formulaire s'affiche , ainsi qu'une liste de carte ( des animaux ).
lorsque je clique sur une carte, j'affiche un console.log pour dire que j'ai cliqué ( je suis débutant en React, ...).

Par la suite , il faudrait que lors du clic, cette page affiche un titre avec le nom de l'animal sur lequel on a cliqué...
le formulaire et la liste disparaissent !
Et la , je ne vois pas comment faire ?

Il faudrait afficher la page avec liste selon une condition: si on a cliqué sur une carte ou non
Si on a cliqué on affiche la carte, sinon, on affiche la liste.

Est-ce la bonne démarche , ou bien y a t-il une façon plus simple de s'y prendre ?
je voudrais d'abord être sûr de la démarche , je verrai le côté technique ensuite.

Merci,
Laurent.