Gerando condicional a partir de um dado via input (REACT) | React

Ando fixando alguns conceitos reacts enquanto estou de férias.. Eu to fazendo um exercício onde utilizo um input para receber um nome, esse nome é armazenado no state e a partir de um click no mouse, aparece uma mensagem de bem vindo mais o nome utilizado no input, até aí tudo bem.. O porém é que quando nada é digitado a mensagem ainda aparece porém sem o nome (obviamente), só que eu gostaria que retornasse uma mensagem de erro no lugar, só que não sei como faria isso, alguém poderia me ajudar?

Segue o código abaixo:

import React from "react";
import styled from "styled-components";

export default function Example2() {
    const [click, setClick] = React.useState(true);
    const [name, setName] = React.useState('');

    let msg = "Parabéns por ter clicado no botão " + name;

    return (
        <SectionExample2>
            <div className={click ? 'msg-noclick' : 'msg-click'}>{click ? '' : msg}</div>
            <form>
                <label>Nome</label><br/>
                <input type='text' placeholder="Digite seu nome completo" onChange={(e) => {setName(e.target.value)}} value={name} />
            </form><br/>
            <button onClick={() => {setClick(!click)}}>Clique aqui</button>
        </SectionExample2>
    )
}

OBS: A tag utilizada no return é gerada a partir de um styled-components, não coloquei o código do mesmo aqui pois acho que não tem necessidade, já que é só estilização.

Oi Victor, tudo bem?

Agradeço por compartilhar sua dúvida e seu código. Vou te ajudar a gerar a mensagem de erro quando nenhum nome for digitado. Para isso, precisaremos fazer algumas modificações no seu código.

Primeiro, vamos adicionar um novo estado chamado error para controlar a exibição da mensagem de erro. Vamos inicializá-lo como false e atualizá-lo para true quando nenhum nome for digitado. Adicione essa linha abaixo do estado name:

const [error, setError] = React.useState(false);

Em seguida, vamos adicionar uma validação ao clicar no botão. Antes de atualizar o estado click, verificaremos se o campo de nome está vazio. Se estiver vazio, definiremos o estado error como true para exibir a mensagem de erro. Caso contrário, definiremos error como false. Vamos modificar a função do botão para incluir essa validação:

<button
  onClick={() => {
    if (name === '') {
      setError(true);
    } else {
      setError(false);
    }
    setClick(!click);
  }}
>
  Clique aqui
</button>

Agora, vamos atualizar a renderização da mensagem para exibir a mensagem de erro quando error for true. Substitua a linha <div className={click ? 'msg-noclick' : 'msg-click'}>{click ? '' : msg}</div> pelo seguinte código:

{click && !error ? (
  <div className="msg-noclick">{msg}</div>
) : (
  <div className="msg-error">Por favor, digite um nome válido.</div>
)}

Com essas modificações, a mensagem de erro será exibida quando nenhum nome for digitado. Caso contrário, a mensagem de boas-vindas com o nome será mostrada. Lembre-se de adicionar o estilo necessário para a classe msg-error no seu componente de estilo.

Aqui está o código completo com as modificações:

import React from "react";
import styled from "styled-components";

export default function Example2() {
  const [click, setClick] = React.useState(true);
  const [name, setName] = React.useState('');
  const [error, setError] = React.useState(false);

  let msg = "Parabéns por ter clicado no botão " + name;

  return (
    <SectionExample2>
      {click && !error ? (
        <div className="msg-noclick">{msg}</div>
      ) : (
        <div className="msg-error">Por favor, digite um nome válido.</div>
      )}
      <form>
        <label>Nome</label><br/>
        <input
          type='text'
          placeholder="Digite seu nome completo"
          onChange={(e) => {setName(e.target.value)}}
          value={name}
        />
      </form><br/>
      <button
        onClick={() => {
          if (name === '') {
            setError(true);
          } else {
            setError(false);
          }
          setClick(!click);
        }}
      >
        Clique aqui
      </button>
    </SectionExample2>
  );
}

Certifique-se de ajustar o estilo de acordo com as classes msg-noclick e msg-error no seu componente de estilo.

Espero que essa solução seja útil para você.

Um abraço e bons estudos.