ReactJS: Comment superposer un composant sur l'élément d'un autre composant?

Question

Je débute juste avec React. J'ai un composant qui contient un champ de saisie et un bouton. Il y a un autre composant qui renvoie du JSX (un point clignotant). J'importe le composant du point clignotant dans le composant principal et je veux superposer le point clignotant sur le champ de saisie lorsque celui-ci est vide.

Comment puis-je y parvenir ? Merci de m'aider.

Le code pour cela peut être trouvé à l'adresse : https://stackblitz.com/edit/react-xmssdv

function App() {
  const [name, setName] = React.useState("");
  const inputChangeHandler = event => {
    setName(event.target.value);
    console.log(name);
  }

  return (

        Cliquez ici!

  );
}

Answer 1

Il peut être facilement réalisé en apportant les deux modifications suivantes:
étape 1. Dans index.js déplacer le composant Dot en haut:

function App() {
  const [name, setName] = React.useState("");
  const [showDot, setShowDot] = React.useState(true);

  React.useEffect(() => {
    name ? setShowDot(false) : setShowDot(true);
  }, [name])

  return (

        { showDot ?  : null }
         setName(event.target.value)} />

        Click Me!
         { name ?  : null }

  );
}

étape 2. Dans Dot/dot.css introduire la position du point en absolu :

.Blink {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 50%;
  animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}