Para quem não está conseguindo exibir a mensagem de sucesso e está usando navigate ao invés do history assim: navigate("/projects", {message: "Projeto criado com sucesso!" }) - Pode dar erro, pois o location.state não é reconhecido na navegação de rotas ao passar apenas o 'message' dessa forma, então no lugar dessa linha você vai colocar: Substitua: navigate("/projects", {message: "Projeto criado com sucesso!" }) Por: const state = { message: "Projeto criado com sucesso!" }; navigate("/projects", {state}); Isso vai forçar o location.state a ser reconhecido no outro componente na navegação de rotas, sendo possível detectar se existe mensagem ou não e ai deve funcionar normalmente.
para as pessoas q não estão conseguindo mostrar a messagem na tela coloquem isso aq history('/projects', { state: { message: 'Projeto criado com sucesso!' } }
para as pessoas q não estão conseguindo mostrar a mensagem na tela coloquem isso aq history('/projects', { state: { message: 'Projeto criado com sucesso!' } }
Caso alguem esteja fazendo e tendo problemas, o certo agora é importar 'useNavigate', e não 'useHistory'. Então, além de atualizar o import para import { useNavigate } from 'react-router-dom', tem que fazer como falaram em outros comentarios a atualização do comando para history('/projects',{state: {message: "Projeto criado com sucesso"}})
Pra quem encerrou a aula e ta começando em outro dia, n esqueça de dar npm run backend em outro terminal pro servidor rodar e aparecer as opções do select
@@devison1780 As opções aparecem para serem selecionadas? Ou elas nem aparecem? Se elas não estiverem aparecendo, tenta dar um npm run backend em um terminal separado, ai elas devem aparecer. Se ainda não der, qualquer coisa me fala que eu tento te mandar a copia do código pra vc colar e ver se funciona
Estava com o problema para demonstrar a mensagem também e fui dar uma pesquisada... E vi num fórum, para mim funcionou mudando a palavra "message" para "text" navigate('/Projects', {state:{text: 'Projeto criado com sucesso'}}) Aí claro, muda message para text nos outros componentes também. Aqui resolveu!
O useEffect tem como retorno void. Então por que retornar uma função? Outra dúvida, vc tá retornando uma função que se for executada, ele executa o clearTimeout, mas quando ela é executava?
eu tive um problema p exibir a mensagem, mas resolvi botando o message dentro de um state no arquivo NewProject.js de: navigate("/projects", message: "Projeto criado com sucesso!" }); para: navigate("/projects", {state: { message: "Projeto criado com sucesso!" }});
Esse projeto é bem pesadinho pra quem ta comecando kkkkkk... Mas bom demais, se conseguir fazer esse codigo funcionar sempre vai ter salvo e vai ajudar nos estudos e projetos futuros
Outra dúvida: há a necessidade de colocar a condicional na page Projects? Porque se não tiver mensagem, o component Message não irá exibir nada, não é?
Pra quem apanhou na visualização da mensagem e já tinha alterado o navigate , eu consegui resolver. O problema estava no arquivo message.js nesse parte sempre erramos devido os acentos . substitua tudo por esse código abaixo. {visible && ( {msg} )}
Opa pessoal. Dúvida rápida! Mesmo após corrigir o navigate consigo acessar o location.state e até imprimo a mensagem de sucesso ou erro! Mas ainda sim o react está me acusando um erro: "O objeto é do tipo 'desconhecido'." Estou usando react typescript
É por conta das mudanças do react router v6, o que resolveu pra mim foi alterar o seguinte: No arquivo NewProject.js alterar o uso do useHistory para useNavigate, ficará desta forma(o que não for listado só manter igual a aula): const history = useNavigate() //Na parte do redirect history('/projects', {state: { message: 'Projeto criado com sucesso!'}})
pra galera que não conseguiu exibir a mensagem, isso é um problema na atualização do state, deem uma olhada nos comentários que o pessoa explica como fazer as alterações!
Não consegui fazer a mensagem aparecer corretamente. Mesmo após ler todos os comentários, fazer as substituições sugeridas, enfim.. mas não vou desistir do projeto, vou continuar o desenvolvimento, quem sabe mais adiante eu descubra em outro projeto como consertar e fazer aparecer corretamente. Desistir não é uma opção.
Infelizmente a mensagem só exibe uma vez. Parece que se ficar criando projetos seguidas vezes, a mensagem não exibe porque não ocorreu alteração na mensagem. Acabei colocando o nome do projeto dentro da mensagem e funcionou. Mas nas alterações o problema persiste.
@@agenciaamorim3900 vai ter um projetao bem completo com React no de Node.js, o curso lança segunda =) para receber o cupom de lançamento se inscreve aqui Amorim: www.horadecodar.com.br/cursos-horadecodar/
Meus Projetos {message && } quando coloco assim, sem o msg, ele funciona certinho mas sem a mensagem, quando coloco o msg, ele nao aparece nada, indicando que o problema esta no useLocation que nao esta pegando a message corretamente. Alguem conseguiu a solução para essa parte?
To usando o github copilot junto enquanto faço o curso, e ele sugeriu até a mensagem de projeto criado com sucesso kkkkkk, deve estar puxando direto do repo esses pedaços de codigo... (edit: sugerindo cores hexadecimais tbm)
Ae professor, até agora consegui passar de todas as aulas mesmo tendo que resolver varios bugs, assim como posso mostrar isso para um avaliador, mostrar que consigo resolver qualquer problema rapidamente usando apenas o google?
É por aí. Agora, eu só teria cuidado com o "resolver qualquer problema rapidamente usando apenas o google" Não é bem assim não. Esses Bugs aí são minúsculos.
caso alguem esteja com problemas para aplicação de estilos está aqui import styles from './Message.module.css'; function Message({ type, msg }) { // Determina a classe de tipo com base no valor passado para a prop "type" const messageTypeClass = type === 'success' ? styles.success : styles.error; return ( {msg} ); } export default Message;
Mesmo trocando o código como informado nos códigos abaixo ou colocando o mesmo código do repositório não estou conseguindo fazer a mensagem aparecer após criar o projeto. No console aparece que está chegando e no arquivo db.json aparece o arquivo criado. O mesmo não apresenta nenhum erro, alguém consegue dar uma luz ?
setInterval precisa de clearInterval caso queira parar o contador, agora setTimeout apenas é executado uma vez, entao nao se usa o clearInterval, o nome Interval já entrega tudo == intervalos enquando timeout é como se fosse limite de tempo, acabou acabou!!!
cara em ProjectForm tem a função ProjectForm nele tem destructuring com handleSubmit que vem de NewProject tem o btnText que tambem veio de NewProject porém temos o projectData , quem manda esta informação para o ProjectForm ? Ele vem do fetch de NewProject?
pqp, depois de muito queimar fosfato e fazer tudo que foi dito nos comentário descobri que minha msg não aparecia por um erro de sintaxe. O maledeto do useEffect estava faltando um 'f'.
Estou com um probleminha na parte do useLocation. Eu fiz tudo direitinho, porem quando chega na parte do location ele não pega a mensagem que deveria pegar e não valida a criação do projeto. Tentei dar um console.log no objeto location e ele não mostra nenhum status, fica dessa forma: location: hash: "" key: "o5kn3djg" pathname: "/project" search: "" state: null Alguem poderia me ajudar ?
Para quem não está conseguindo exibir a mensagem de sucesso e está usando navigate ao invés do history assim: navigate("/projects", {message: "Projeto criado com sucesso!" }) - Pode dar erro, pois o location.state não é reconhecido na navegação de rotas ao passar apenas o 'message' dessa forma, então no lugar dessa linha você vai colocar:
Substitua: navigate("/projects", {message: "Projeto criado com sucesso!" })
Por:
const state = { message: "Projeto criado com sucesso!" };
navigate("/projects", {state});
Isso vai forçar o location.state a ser reconhecido no outro componente na navegação de rotas, sendo possível detectar se existe mensagem ou não e ai deve funcionar normalmente.
Valeu mano 🤙
deu super certo, valeu irmao
Valeu demais
o meu tá dando erro em e.preventDeFault falando que não é uma função
@@AndersonLima-ff8be tenta usar e.preventDefault no caso, Default é uma palavra e vc usou camel case no F
para as pessoas q não estão conseguindo mostrar a messagem na tela coloquem isso aq
history('/projects', { state: { message: 'Projeto criado com sucesso!' } }
Valeu Simeone!!
Obrigada por compartilhar! Não estava entendo oq tinha feito de errado rs
Valeu resolveu no meu projeto!
@@marcoscappelli me ajuda por favor mano akjfhaksjdfh
cheguei nessa parte e a msg não quer aparecer
@@Doisde10 Conseguiu mano ? to travado aqui mesmo fazendo as alterações que o pessoal falou
Senhores, no
if (location.state) {
message = location.state
}
eu tirei o .message e já resolveu o problema. Obs, estou usando o useNavigate.
Boa continuidade no estudo pra vcs
para as pessoas q não estão conseguindo mostrar a mensagem na tela coloquem isso aq
history('/projects', { state: { message: 'Projeto criado com sucesso!' } }
Obrigado, amigo! Funcionou aqui.
Caso alguem esteja fazendo e tendo problemas, o certo agora é importar 'useNavigate', e não 'useHistory'. Então, além de atualizar o import para import { useNavigate } from 'react-router-dom', tem que fazer como falaram em outros comentarios a atualização do comando para history('/projects',{state: {message: "Projeto criado com sucesso"}})
me salvou mt
Pra quem encerrou a aula e ta começando em outro dia, n esqueça de dar npm run backend em outro terminal pro servidor rodar e aparecer as opções do select
acontece bastante xD
@@MatheusBattisti aconteceu cmg kkk
@@curtiuseucomentario6203 minhas opções select nem seleciona e porq coloquei o if ternário da forma da aula e nada
@@devison1780 As opções aparecem para serem selecionadas? Ou elas nem aparecem? Se elas não estiverem aparecendo, tenta dar um npm run backend em um terminal separado, ai elas devem aparecer.
Se ainda não der, qualquer coisa me fala que eu tento te mandar a copia do código pra vc colar e ver se funciona
@@curtiuseucomentario6203 aparece sim só não seleciona
Finalmente resolveu aqui pra mim mudando a parte do useEffect no Message
useEffect(() => {
setVisible(!!msg);
if (msg) {
const timer = setTimeout(() => {
setVisible(false);
}, 3000);
return () => clearTimeout(timer);
}
}, [msg]);
Muito obrigado por compartilhar seu conhecimento e muito obrigado para a galera que ajuda nos comentsss
Estava com o problema para demonstrar a mensagem também e fui dar uma pesquisada... E vi num fórum, para mim funcionou mudando a palavra "message" para "text"
navigate('/Projects', {state:{text: 'Projeto criado com sucesso'}})
Aí claro, muda message para text nos outros componentes também. Aqui resolveu!
realmente só funcionou aqui qd mudei pra text... que bruxaria foi essa?
No typescript to usando message, deve ser algo do tipo, sou leigo pra isso por enquanto kkkkkkkk @@diego01manaus
O useEffect tem como retorno void. Então por que retornar uma função? Outra dúvida, vc tá retornando uma função que se for executada, ele executa o clearTimeout, mas quando ela é executava?
eu tive um problema p exibir a mensagem, mas resolvi botando o message dentro de um state no arquivo NewProject.js
de:
navigate("/projects", message: "Projeto criado com sucesso!" });
para:
navigate("/projects", {state: { message: "Projeto criado com sucesso!" }});
Dessa forma resolveu aqui também, porém, ela sempre exibe ao carregar a página, mesmo se nao criar nada... quebrou o galho Porinquanto kk
Resolveu aqui, valeu!
Voce e um deus. obrigado ai! resolveu aqui
Salva vidas
Obrigado
Esse projeto é bem pesadinho pra quem ta comecando kkkkkk... Mas bom demais, se conseguir fazer esse codigo funcionar sempre vai ter salvo e vai ajudar nos estudos e projetos futuros
Outra dúvida: há a necessidade de colocar a condicional na page Projects? Porque se não tiver mensagem, o component Message não irá exibir nada, não é?
Realmente ta puxado agora, mas estou focado! Parabéns pelas aulas.
dale Fernando, vai dar certo =D
@@MatheusBattisti amém! To adornado as aulas. Quero assistir a de js sua depois.
Não vejo porque lançar um clearTimeout, não seria necessario apenas no caso de um set Interval, ou há algum motivo que não conheço?
Depois da ultima aula, só os fortes permanecem aqui KKKKKKKK
Essa eu passei facil, já fiz muitas modificações, mas a da aula de hoje foi usar o state { state: { message: "Projeto criado com sucesso" } }
Aula muito boa !!! Obrigado !!!
valeu Renato!
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Cara qual extenção tu usa pra autocompletar as tags no jsx?
Pra quem apanhou na visualização da mensagem e já tinha alterado o navigate , eu consegui resolver.
O problema estava no arquivo message.js nesse parte sempre erramos devido os acentos .
substitua tudo por esse código abaixo.
{visible && (
{msg}
)}
Valeu meu chapa
aqui deu erro
Opa pessoal. Dúvida rápida!
Mesmo após corrigir o navigate consigo acessar o location.state e até imprimo a mensagem de sucesso ou erro!
Mas ainda sim o react está me acusando um erro: "O objeto é do tipo 'desconhecido'."
Estou usando react typescript
Minha mensagem não está aparecendo e o react não está reclamando de nenhum erro. já reassistir o vídeo várias vezes e meu código está tudo ok.
Comigo também!
Conseguiu resolver?
@@rickelmemaia4521 Infelizmente não, até desisti do projeto.
@@wellingtonempreendendo4290 olá Wellington, tudo bem? você tentou copiar o código lá no github?
É por conta das mudanças do react router v6, o que resolveu pra mim foi alterar o seguinte:
No arquivo NewProject.js alterar o uso do useHistory para useNavigate, ficará desta forma(o que não for listado só manter igual a aula):
const history = useNavigate()
//Na parte do redirect
history('/projects', {state: { message: 'Projeto criado com sucesso!'}})
pra galera que não conseguiu exibir a mensagem, isso é um problema na atualização do state, deem uma olhada nos comentários que o pessoa explica como fazer as alterações!
Não consegui fazer a mensagem aparecer corretamente. Mesmo após ler todos os comentários, fazer as substituições sugeridas, enfim.. mas não vou desistir do projeto, vou continuar o desenvolvimento, quem sabe mais adiante eu descubra em outro projeto como consertar e fazer aparecer corretamente.
Desistir não é uma opção.
Conseguiu corrigir? Tenta alterar o ficheiro NewProject.jsx Para const navigate = useNavigate()
function createPost(project){
.
.
.
then((resp) => resp.json())
.then((data) => {
**navigate('/projects',{state: {message: 'Projeto criado com sucesso'}})**
})
.catch((err) => console.log(err))
}
@@anaamaral6855 consegui hehe, obrigado!!
Infelizmente a mensagem só exibe uma vez. Parece que se ficar criando projetos seguidas vezes, a mensagem não exibe porque não ocorreu alteração na mensagem. Acabei colocando o nome do projeto dentro da mensagem e funcionou. Mas nas alterações o problema persiste.
show suas aulas parabens
obrigado Matheus!
Show!!!
Quando vai lançar o curso de reactjs completo
Esse vai demorar xD se pa, meados do ano que vem
@@MatheusBattisti já estou no aguardo
@@agenciaamorim3900 vai ter um projetao bem completo com React no de Node.js, o curso lança segunda =) para receber o cupom de lançamento se inscreve aqui Amorim: www.horadecodar.com.br/cursos-horadecodar/
@@MatheusBattisti Pode enviar o Link desse treinamento que terá o projeto em React ? E o Cupom
Modificação (14/10/2024):
navigate('/projects', { state: { message: 'Projeto criado com sucesso!'}});
Alguma boa alma, tem o github dessa aula ?
Meus Projetos
{message && }
quando coloco assim, sem o msg, ele funciona certinho mas sem a mensagem, quando coloco o msg, ele nao aparece nada, indicando que o problema esta no useLocation que nao esta pegando a message corretamente.
Alguem conseguiu a solução para essa parte?
To usando o github copilot junto enquanto faço o curso, e ele sugeriu até a mensagem de projeto criado com sucesso kkkkkk, deve estar puxando direto do repo esses pedaços de codigo... (edit: sugerindo cores hexadecimais tbm)
Ae professor, até agora consegui passar de todas as aulas mesmo tendo que resolver varios bugs, assim como posso mostrar isso para um avaliador, mostrar que consigo resolver qualquer problema rapidamente usando apenas o google?
É por aí. Agora, eu só teria cuidado com o "resolver qualquer problema rapidamente usando apenas o google" Não é bem assim não. Esses Bugs aí são minúsculos.
caso alguem esteja com problemas para aplicação de estilos está aqui import styles from './Message.module.css';
function Message({ type, msg }) {
// Determina a classe de tipo com base no valor passado para a prop "type"
const messageTypeClass = type === 'success' ? styles.success : styles.error;
return (
{msg}
);
}
export default Message;
👏👏👏
valeu Eric!
Visto
👍👏
tamo junto Zeriel!
Tentei fazer com TypeScript me quebrei todo rsrsrs
Não aparece a mensagem , já mudei tudo de históry pra navigate e nada
pra mim tambem estava assim. isso 'e questao das atualizacoes do v6. Leia os comentarios acima, que voce ira conseguir resolver. valeu
Mesmo trocando o código como informado nos códigos abaixo ou colocando o mesmo código do repositório não estou conseguindo fazer a mensagem aparecer após criar o projeto. No console aparece que está chegando e no arquivo db.json aparece o arquivo criado. O mesmo não apresenta nenhum erro, alguém consegue dar uma luz ?
também estou com o mesmo erro
setInterval precisa de clearInterval caso queira parar o contador, agora setTimeout apenas é executado uma vez, entao nao se usa o clearInterval, o nome Interval já entrega tudo == intervalos enquando timeout é como se fosse limite de tempo, acabou acabou!!!
cara em ProjectForm tem a função ProjectForm nele tem destructuring com handleSubmit que vem de NewProject tem o btnText que tambem veio de NewProject porém temos o projectData , quem manda esta informação para o ProjectForm ? Ele vem do fetch de NewProject?
pqp, depois de muito queimar fosfato e fazer tudo que foi dito nos comentário descobri que minha msg não aparecia por um erro de sintaxe. O maledeto do useEffect estava faltando um 'f'.
Minha mensagem não apareceu
A minha tb não. Ja conseguiu resolver?
Estou com um probleminha na parte do useLocation.
Eu fiz tudo direitinho, porem quando chega na parte do location ele não pega a mensagem que deveria pegar e não valida a criação do projeto.
Tentei dar um console.log no objeto location e ele não mostra nenhum status, fica dessa forma:
location:
hash: ""
key: "o5kn3djg"
pathname: "/project"
search: ""
state: null
Alguem poderia me ajudar ?
opa, faz a dica do amigo Joao Patrick Martins
, no comentario acima
Quem vai chegar no fim do curso? R: EU!!!!! (...a aula anterior foi PUNK!!!!)
cuidado ao usar : let message = '' "; como const.
Visto