-
Conteúdo Similar
-
Por Ferdz-Agencia-Digital
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 ?
-
Por Sapinn
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.
-
Por Guilherme Teixeira
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.
-
Por _marlon307
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 -
Por Jéssica Nascimento
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;
-
