Pesquisar na Comunidade

Estou importando o NavLink do react-router-dom e montando o meu menu assim: <Nav navbar>{createLinks(routes)}</Nav> No arquivo routes.js estou montando enviando conforme código abaixo: var routes = [ { path: "/index", name: "Dashboard", icon: "ni ni-tv-2 text-primary", component: Index, tipo: 1, layout: "/admin", }, { path: "/solicitacoes-trabalho", name: "Solicitações", icon: "ni ni-cart text-orange", tipo: 1, component: Solicitacoes, layout: "/admin", }, { path: "/Clientes", name: "Clientes", icon: "ni ni-single-02 text-orange", tipo: 2, component: Clientes, layout: "/admin", }, ]; export default routes; Há como na exibição eu conseguir filtrar pelo tipo e só mostrar o que for do tipo 1 ?

Opa galera, tudo blz? Recentemente comecei a estudar reactjs e para praticar estou fazendo o clone da Netiflix. Mas estou com um erro ao tentar chamar as imagens da API do TMDB o erro é: TypeError: Cannot read properties of undefined (reading 'results') Já tentei refazer o código varias vezes mas não consegui resolver o problema. Vou postar o resto do código aqui App.js: import React, {useEffect, useState} from 'react'; import Tmdb from './Tmdb'; import MovieRow from './components/MovieRow'; const App = () =>{ const [movieList, setMovieList] = useState([]); useEffect(()=>{ const loaddAll = async () =>{ let list = await Tmdb.getHomeList(); setMovieList(list) } loaddAll(); }, []); return( <div className="page"> <section className="lists"> {movieList.map((item, key)=>( <MovieRow key={key} title={item.title} items={item.items}/> ))} </section> </div> ); } export default App; Consumir a api: Tmdb.js: const API_KEY = '******************************'; const API_BASE = 'https://api.themoviedb.org/3'; const basicFetch = async (endpoint) =>{ const req = await fetch(`${API_BASE}${endpoint}`) const json = await req.json(); return json; } export default { getHomeList: async () =>{ return [ { slug: 'originals', title: 'Originais da Netflix', items: await basicFetch(`/discover/tv?with_networks=213&language=pt-BR&api_key=${API_KEY}`) }, { slug: 'trending', title: 'Recomendados para você', item: await basicFetch(`/trending/all/week?language=pt-BR&api_key=${API_KEY}`) }, { slug: 'toprated', title: 'Em alta', item: await basicFetch(`/movie/top_rated?language=pt-BR&api_key=${API_KEY}`) }, { slug: 'action', title: 'Ação', item: await basicFetch(`/discover/movie?width_genres=28&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'comedy', title: 'Comédia', item: await basicFetch(`/discover/movie?width_genres=35&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'horror', title: 'Terror', item: await basicFetch(`/discover/movie?width_genres=27&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'romance', title: 'Romance', item: await basicFetch(`/discover/movie?width_genres=10749&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'documentary', title: 'Documentários', item: await basicFetch(`/discover/movie?width_genres=99&language-pt-BR&api_key=${API_KEY}`) }, ] } } Componente para mostrar os filmes: MovieRow.js: import React from "react"; import './MovieRow.css'; export default ({title, items}) =>{ return ( <div> <h2>{title}</h2> <div className="moviewRow--listarea"> {items.results.length > 0 && items.results.map((key, item)=>( <img src={`https://image.tmdb.org/t/p/w300${item.poster_path}`} /> ))} </div> </div> ); } Se alguém pudesse me ajudar eu ficaria muito grato.

Olá pessoal tudo bem? Sou iniciante em React + Material Ui no node.js Quanto ao layout estou indo até que bem. Contudo, hoje me deparei com um problema. Estou fazendo um formulário de login que irá verificar os dados em um BD Mysql. Criei o formulário com hook form e na hora de submeter pretendo passar os dados do formulário por parametro em uma função, ela pesquisar no mysql e retornar o resultado. Contudo, na hora que coloquei funções assincronas que tem Promisse no arquivo que irá conectar com o DB o seguinte erro aparece: Unhandled Rejection (TypeError): Net.connect is not a function Isso depois que coloquei os códigos para conectar o DB. Como faço para chamar funcões assincornas dentro React então? (a chamada está onde está comentado "Aqui chamo a função" Segue o código: import React, { useState } from 'react'; import Container from '@material-ui/core/Container'; import Grid from '@material-ui/core/Grid'; import Card from '@material-ui/core/Card'; import CardMedia from '@material-ui/core/CardMedia'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import FormControl from '@material-ui/core/FormControl'; import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import InputAdornment from '@material-ui/core/InputAdornment'; import AccountCircle from '@material-ui/icons/AccountCircle'; import Lock from '@material-ui/icons/Lock'; import Button from '@material-ui/core/Button'; import { useForm } from "react-hook-form"; import Alert from '@material-ui/lab/Alert'; const useStyles = makeStyles((theme) => ({ logotipo: { paddingTop: theme.spacing(6), backgroundColor: theme.palette.background.default, margin: '0 auto', boxShadow: 'none' }, logotipoSegg: { margin: '0 auto', width: '30%' }, centraliza: { textAlign: 'center', paddingTop: theme.spacing(4), }, margin: { marginTop: theme.spacing(2), paddingRight: theme.spacing(2), paddingLeft: theme.spacing(2) }, button: { marginTop: theme.spacing(4), } })); export default function Login() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data) document.getElementById('usuario').setAttribute('disabled', 'true') document.getElementById('senha').setAttribute('disabled', 'true') /*** Aqui chamo a função ******/ const usuario = require('../config/Usuario') console.log(usuario.login) }; const classes = useStyles(); return ( <> <Container maxWidth='lg'> <Grid container direction="row" justify="space-around" alignItems="flex-start" > <Grid item xs={12} sm={6} md={5} > <Card className={classes.logotipo}> <CardMedia component="img" alt='Logotipo Live Experience' image='/images/LogotipoLiveExperience.png' title='Logotipo Live Experience' /> </Card> <Typography variant="h1" component="h1">Sistema de gestão para Restreaming</Typography> <Typography component="p" className={classes.centraliza}>Faça seu login para acessar o sistema</Typography> <form onSubmit={handleSubmit(onSubmit)}> <FormControl className={classes.margin} fullWidth> <InputLabel htmlFor="usuario">Digite seu usuário:</InputLabel> <Input id="usuario" {...register("usuario", { required: true })} startAdornment={ <InputAdornment position="start"> <AccountCircle /> </InputAdornment> } /> </FormControl> {errors?.usuario?.type === "required" && <Alert severity="error">É necessário informar seu usuário acima!</Alert>} <FormControl className={classes.margin} fullWidth> <InputLabel htmlFor="senha">Digite sua senha:</InputLabel> <Input id="senha" type='password' {...register("senha", { required: true })} startAdornment={ <InputAdornment position="start"> <Lock /> </InputAdornment> } /> </FormControl> {errors?.senha?.type === "required" && <Alert severity="error">É necessário informar sua senha acima!</Alert>} <Button fullWidth variant="contained" color="primary" className={classes.button} type="submit">Acessar Sistema</Button> </form> <Typography component="p" className={classes.centraliza}><img src="/images/segg.png" alt='SEGG' className={classes.logotipoSegg} /></Typography> </Grid> </Grid> </Container> </>); } E este é começo do código do Mysql que comecei e na hora que coloquei a conexão deu o erro: const mysql = require('mysql2') const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'xxxxxxx', database: 'liveexperience' }); function login(dados) { return ('Ok para ' + dados.usuario) } module.exports = {login} Desde já muito obrigado.

Boa noite. Bom Dia. Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado. import React, { useState } from 'react'; import { Link } from 'react-router-dom'; //import DropModMn from '../../Helper/DropModMn'; import { ReactComponent as Respponse } from '../../icons/respponse.svg'; import styles from '../css/search.module.css'; import SubMenuCtg from './SubMneu/SubMenuCtg'; const Search = () => { const menu = [ { nctg: 'Masculino', ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'], }, { nctg: 'Femenino', ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'], }, { nctg: 'Criança', ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'], }, { nctg: 'Acessórios', ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'], }, { nctg: 'Promoção', ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'], } ]; const [expand, setExpand] = useState(false); function MouseOver(event){ event.preventDefault(); console.log(event); if(expand) setExpand(!expand); else setExpand(!expand); } return ( <nav className={styles.search}> <div className={styles.ct}> <Link to="/" className={styles.index}> <Respponse aria-label="Respponse"/> </Link> </div> <div className={styles.ct}> <ul className={styles.ldep}> {menu.map((m) => <li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}> <Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link> <SubMenuCtg gl={m.ctg} exp={expand} /> </li> )} </ul> </div> </nav> ) } export default Search

Estou recebendo o erro abaixo: Error: Invariant failed: You should not use <Link> outside a <Router> import React, { Component } from "react"; import { Link } from 'react-router-dom'; export default class Product extends Component { render() { return ( <> <h1>Product</h1> <ul> <li><Link to='/'>Home</Link></li> </ul> </> ); } } import React from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; import Main from './pages/main'; import Product from "./pages/product"; const Routes = () => ( <BrowserRouter> <Switch> <Route exact path="/" component={Main} /> <Route path="/products" component={Product} /> </Switch> </BrowserRouter> ); export default Routes; import Routes from "./routes"; // import api from './services/api'; import './styles.css'; import Main from './pages/main'; import Header from './components/Header'; function App() { return ( <div className="App"> <Header /> <Main /> <Routes /> </div> ); } export default App;

Olá pessoal. Estou começando a aprender Java Script. Estou tentando rodar uns arquivos, mas aparecem alguns erros. Baixei 2 arquivos no GitHub, e em um tutorial simplesmente fala para manda os seguintes comandos: npm install npm start Acontece que o resultado são várias linhas de erros, e é basicamente escrito "no such file or directory, open" e a indicação de vários aquivos, mas destes arquivos indicados realmente não são da pasta que estou rodando o programa. Primeiramente eu instalei o installer do Node.JS. Depois abri o PowerShell do windows e andei até a pasta do arquivo. Lá na pasta tem o package.json. Mandei o comando npm install e saiu o resultado: PS A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master> npm install npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-util-4d3ef4a2\LICENSE' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-account-3f4c6ed2\package.json' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\eth-sig-util-9b4fcb97\package.json' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-tx-239a6da7\package.json' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-util-7ebce322\LICENSE' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-account-3f4c6ed2\.travis.yml' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\eth-sig-util-9b4fcb97\.npmignore' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-tx-239a6da7\CHANGELOG.md' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-account-3f4c6ed2\CHANGELOG.md' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\eth-sig-util-9b4fcb97\README.md' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-tx-239a6da7\fake.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-util-b6b4bd9f\dist\account.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-account-3f4c6ed2\index.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\eth-sig-util-9b4fcb97\index.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-tx-239a6da7\index.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-util-b6b4bd9f\dist\bytes.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-account-3f4c6ed2\README.md' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\eth-sig-util-9b4fcb97\circle.yml' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\crypto-browserify-682e352b\example\bundle.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-util-b6b4bd9f\dist\constants.js' npm WARN tar ENOENT: no such file or directory, open 'A:\yEarn.finance\github\iearn-finance-master\iearn-finance-master\node_modules\.staging\ethereumjs-tx-239a6da7\karma.conf.js' [...] Os arquivos que baixei: https://github.com/iearn-finance/iearn-finance https://github.com/iearn-finance/itoken Como resolver isto?

Bom dia Galera!Fiz uma tela de cadastro na aplicação usando popup. Para cadastro tudo certo, pois não preciso recolher informações.Para fazer a tela de update, precisava que quando clicasse no link "Editar" ele buscasse a linha que eu cliquei para editar, porem em todas as tentativas de resolver isso ele pegou somente a primeira linha, fora que colocando o html do popup nessa ordem, ele foi parar la no canto direito.Segue o codigo de uma das tentativas :// Aqui é onde faço o select com todos ativos da carteira em tabela, e a DIV popup é exibida quando clico no link Editar. Não sei se é o lugar correto mas foi o mais proximo que consegui de fazer funcionar. Porem como ja explicado sempre pega o primeiro valor em vez da linha que cliquei{ativo.map(row => (<tr><input className="key" value={row._id} /><td>{row.ativo}</td><td>{row.quantidade}</td><td>{row.data_entrada}</td><td>{row.valor_entrada}</td><td>{row.data_saida}</td><td>{row.valor_saida}</td><td>R${row.valor_saida - row.valor_entrada}</td><td><a onClick={edit}>Editar</a></td><div className="popupedit"><div className="popupedit-content"><img src={close} alt="close" onClick={fechar} className="close" width="20px" height="20px"/><center><input type="text" placeholder="Ativo"></input><input type="text" placeholder="Lotes"></input><div className="datacompra"><input type="date" placeholder="Data da Compra" className="data"></input><input type="checkbox" className="check"></input><label className="check">Hoje</label></div><input type="text" placeholder="Valor da Compra"></input><div className="datacompra"><input type="date" placeholder="Data da Compra" className="data"></input><input type="checkbox" className="check"></input><label className="check">Hoje</label></div><input type="text" placeholder="Valor da Venda"></input> </center><button className="button">Adicionar</button></div></div></tr>// função que chama exibi o popupfunction edit(){document.querySelector(".popupedit").style.display = "flex";}

Olá ... Hospedamos uma aplicação feita em NODEJS e REACT e ela esta em HTTPS , porem essa aplicação consome uma API REST que esta em HTTP. Com isso o navegador indica Mixed Content, porem não temos como alterar essa API para HTTPS .... Existe alguma solução para esse caso ? Trabalhar com conteúdo misto ....

Pessoal estou tentando configurar o Debugger pro Chrome no VSCode ...para um projeto em 'React' e acredito estar fazendo algo errado.. 1 ) Instalei a extensão do Debugger do Chrome .. 2 ) Editei o launch.json da seguinte forma { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }, ] } Porem quando vou rodar F5 nada acontece ... o Chrome nao abre .... Alguem teria alguma solução para isso ?

Boa tarde ... Sou iniciante trabalhando com React e estou com uma missão de fazer um sistema com autenticação de usuário . Para esse teste criamos uma API com apenas o campo de usuário ( nao tem senha por enquanto) .... Minha ideia é fazer um formulario em que se a pessoa digitar um usuario válido esta ok para entrar no sistema Consegui fazer a tela e o acesso a API.... porem quando vou entrar no sistema me retorna: Seguindo um manual estou com o código da seguinte forma: const requestInfo = { method: 'POST', body: JSON.stringify(data), headers: new Headers({ 'Content-Type': 'application/json', }), }; fetch('http://10.0.0.49:9000/login', requestInfo) .then(response => { console.log(response); if(response.ok) { return response.json() } throw new Error("Login inválido..."); }) .then(token => { localStorage.setItem('token', token); this.props.history.push("/admin"); return; }) .catch(e => { this.setState({ message: e.message }); }); } Queria ver se alguém ja passou por algo parecido... ou se tem alguma sugestão para solução desse problema. Aparece o seguinte erro: Unexpected token V in JSON at position 0 Aguardo retornos Obrigado Qu

Estou fazendo minha primeira grande aplicação em react, e estou com um problema onde TODOS meus componentes estão sendo renderizados desnecessariamente, causando trava na UI por 1 ou 2 segundos. Tenho 2 grandes problemas no momento: 1. Estou renderizando uma lista com varios componentes, essa lista possui um checkbox individual e um checkbox geral para selecionar a lista inteira. Ao selecionar a lista inteira, vejo que a ui trava por um tempo (nesse tempo ela esta renderiznado todos os componentes novamente) 2. Ao buscar mais itens para a lista, a UI tambe trava por um tempo, acredito que ele esteja renderizando novamente os componentes da lista que ja estavam renderizados, mais os novos itens que foram buscados. Eu estou usando a context API para fazer algumas chamadas HTTP e buscar todas as informações que preciso, e salvando elas em um estado. Depois estou iterando esse estado para renderiar as informações. Quando busco mais itens para a lista, estou dando um push nesse array de estado ja existente. Dentro do meu componente de lista, estou usando useMemo para tentar bloquear essas renderizações desnecessárias, porém não parece estar funcionando. ```javascript const memoizedCardBaseInfo = useMemo(() => { return ( <CatalogCardBaseInfo response={response} tags={tags} checkCard={checkCard} checkedAll={checkedAll} singleChecked={singleChecked} setSingleChecked={setSingleChecked} setCheckedAll={setCheckedAll} indexRef={indexRef} /> ); }, [singleChecked, checkedAll]); const memoizedCatalogChartGroup = useMemo(() => <CatalogCardChartGroup response={response} />, [response]); const memoizedCatalogCardMktpExpd = useMemo(() => <CatalogCardMktpExpd response={response} />, [response]); ``` O que estou fazendo de errado aqui ? Como faço para bloquear renderizações desnecessárias ?

Bom estou fazendo um collapse porem ele esta show/hide todos os elementos, quando eu clico em sensores chief ele abre todos os sensores chief era para ser apenas aquelas sensores chief q pertence aquele gateway. como eu poderia fazer para mostra/esconder apenas naqueles certo. tela: assim esta montado minha função: butão: é coloquei aki:

Olá, estou com um problema no VS Code quando tento instalar algo pelo terminal dele, "token não reconhecido no texto de origem". Estou tentando instalar o react-navigation/native mas ele não deixa .

Olá, tenho um formulário que é preenchido com dados get via rest, esta tudo funcionado, só que não é possível alterar o texto dos inputs. Já tentei a solução do próprio site do react(https://pt-br.reactjs.org/docs/forms.html) mas não deu certo. O erro que é apresentado no console:

Boa noite, atualmente criamos um app pela plataforma appsheet(no-code). porém estou querendo criar uma aplicação própria(junto a equipe, temos 4pessoas), e nao sei em qual linguagem criar. precisamos que funcione web(para o pessoal interno) e mobile(android) para os téc em campo. estava pesquisando e vi que pelo react native da pra fazer o web e mobile, nao sei se seria o melhor. estavamos fazendo pelo android studio, só que lembramos que vai precisar ser acessado pela web e dei uma pausa.