Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1372925853739458569
Melhorar a pergunta e "completar" o código para torná-lo sintaticamente válido
Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

SetInterval dentro Como utilizar setTimeout para mostrar um componente apenas após determinado tempo com bloco JSXReact?

Estou fazendo um chatbot e queroQuero que determinada mensagemdeterminado componente só apareça na tela depois de 1 segundo. Tem como fazer isso usando bloco JSX.Quando?

Quando coloco o codigocódigo abaixo, aparece um número na tela ao invés da mensagem.

function App() {
  return (
    <>
      {setInterval(() => {
    <div className="answer" >  return (
          <div className="answer">
            <input
              type="text"
              placeholder="Nome e sobrenome"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <button type="submit" onClick={handleInputName}>
              <PlayArrowIcon fontSize="large" color="primary" />
            </button>
          </div>
        );
      }, 1000)}
    </>
  );
}

SetInterval dentro com bloco JSX

Estou fazendo um chatbot e quero que determinada mensagem só apareça na tela depois de 1 segundo. Tem como fazer isso usando bloco JSX.Quando coloco o codigo abaixo aparece um número na tela ao invés da mensagem.

return (
{setInterval(() => {
    <div className="answer" >
        <input
           type="text"
           placeholder="Nome e sobrenome"
           value={name}
           onChange={e => setName(e.target.value)}
         />
         <button type="submit" onClick={handleInputName}>
            <PlayArrowIcon fontSize="large" color="primary" />
         </button>
     </div>
}, 1000)}
)

Como utilizar setTimeout para mostrar um componente apenas após determinado tempo com React?

Quero que determinado componente só apareça na tela depois de 1 segundo. Tem como fazer isso usando bloco JSX?

Quando coloco o código abaixo, aparece um número na tela ao invés da mensagem.

function App() {
  return (
    <>
      {setInterval(() => {
        return (
          <div className="answer">
            <input
              type="text"
              placeholder="Nome e sobrenome"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <button type="submit" onClick={handleInputName}>
              <PlayArrowIcon fontSize="large" color="primary" />
            </button>
          </div>
        );
      }, 1000)}
    </>
  );
}
adicionou 80 caracteres ao conteúdo
Fonte Link

Estou fazendo um chatbot e quero que determinada mensagem só apareça na tela depois de 1 segundo. Tem como fazer isso comusando bloco JSX.Quando coloco o codigo abaixo aparece um número na tela ao invés da mensagem.

return (
{setInterval(() => {
    <div className="answer" >
        <input
           type="text"
           placeholder="Nome e sobrenome"
           value={name}
           onChange={e => setName(e.target.value)}
         />
         <button type="submit" onClick={handleInputName}>
            <PlayArrowIcon fontSize="large" color="primary" />
         </button>
     </div>
}, 1000)}
)

Estou fazendo um chatbot e quero que determinada mensagem só apareça na tela depois de 1 segundo. Tem como fazer isso com bloco JSX.

return (
{setInterval(() => {
    <div className="answer" >
        <input
           type="text"
           placeholder="Nome e sobrenome"
           value={name}
           onChange={e => setName(e.target.value)}
         />
         <button type="submit" onClick={handleInputName}>
            <PlayArrowIcon fontSize="large" color="primary" />
         </button>
     </div>
}, 1000)}
)

Estou fazendo um chatbot e quero que determinada mensagem só apareça na tela depois de 1 segundo. Tem como fazer isso usando bloco JSX.Quando coloco o codigo abaixo aparece um número na tela ao invés da mensagem.

return (
{setInterval(() => {
    <div className="answer" >
        <input
           type="text"
           placeholder="Nome e sobrenome"
           value={name}
           onChange={e => setName(e.target.value)}
         />
         <button type="submit" onClick={handleInputName}>
            <PlayArrowIcon fontSize="large" color="primary" />
         </button>
     </div>
}, 1000)}
)
Fonte Link

SetInterval dentro com bloco JSX

Estou fazendo um chatbot e quero que determinada mensagem só apareça na tela depois de 1 segundo. Tem como fazer isso com bloco JSX.

return (
{setInterval(() => {
    <div className="answer" >
        <input
           type="text"
           placeholder="Nome e sobrenome"
           value={name}
           onChange={e => setName(e.target.value)}
         />
         <button type="submit" onClick={handleInputName}>
            <PlayArrowIcon fontSize="large" color="primary" />
         </button>
     </div>
}, 1000)}
)