Perguntas com a tag [react]
É uma biblioteca JavaScript de código aberto para criar interfaces de usuário. É mantido pelo Facebook, Instagram e uma comunidade de desenvolvedores individuais e outras empresas
1,661
perguntas
0
votos
2
respostas
65
visitas
Modal React Js next
Estou criando uma página de personagens, nela tem uma foto de cada personagem e quando clico na foto ela abre um modal exibindo mais informações do personagem. Porém em vez de abrir um só modal, ele ...
0
votos
0
respostas
180
visitas
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
Estou recebendo o erro "TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))" quando tento usar o useState, estou passando esse projeto do React para o Next
...
0
votos
0
respostas
86
visitas
Meu componente altera a URL mas nao renderiza a pagina
Estou tentando fazer uma navegação entra páginas em um projeto ReactJS.
Versão "react-router-dom": "^6.4.2",
No meu componente index.js tenho o seguinte código:
import React from &...
-2
votos
1
resposta
64
visitas
como consumir este Array que vem da API no react com typeScript?
[
{
"ssId": 420090,
"statusSS": "Reservado",
"dataInicialVoo": null,
"pendencias": [
{
"id"...
0
votos
0
respostas
17
visitas
ReactJS - Capturar eventos de um iframe
Olá, tenho uma página em React que renderiza um iframe construído em .net que consiste de uma lista com alguns botões de filtragem. Preciso que ao clicar em um dos botões no iframe, os dados daquele ...
0
votos
1
resposta
100
visitas
Passar função pra outro componente - ReactJS
Tenho uma função que muda um estado, só que preciso receber essa função em outro componente e aplicar no botão que vai executar a função. Quando coloco um botão nesse mesmo componente, consigo ...
-2
votos
1
resposta
20
visitas
REACT - Como pego no array somente itens que tem"sim" em disponível? Utilizando um botão!
export default function App() {
const [produtos, setProdutos] = useState([]);
const lista = [
{
id: 1,
nome: "Livro",
preco: 32.99,
estoque: "sim"
...
-2
votos
1
resposta
41
visitas
Ajuda em react, como faço para aparecer somente os itens em estoque?
Tenho o seguinte problema, criar um array onde mostre uma lista com eles e um botão para mostrar somente os que estão em estoque("sim").
Quero fazer com que quando eu clique no botão apareça ...
-2
votos
1
resposta
25
visitas
Inserir dados dentro de objetos nas colunas em um DataGrid do Material UI
Bom dia!
Como insiro dados em minhas columns fields que estejam dentro de objetos?
Ex:
"cliente": {
"nome": "NOME DO CLIENTE"
},
"entregador": {
"nome&...
-3
votos
1
resposta
50
visitas
'Component' is defined but never user no-unused-vars React
Estou usando o React pela primeira vez e está dando esse erro quando crio um componente e exporto para ser instancionado no index.js
src\index.js
Line 4:8: 'firstComponent' is defined but never ...
0
votos
0
respostas
12
visitas
Como esconder a logo do plotly no react e tornar o gráfico responsivo?
Gerei um gráfico em um projeto React utilizando a lib Plotly, porém preciso esconder a logo e alguns ícones e tornar o gráfico responsivo.
Alguns comandos fazem isso de maneira fácil, porém achei isso ...
0
votos
0
respostas
101
visitas
Como criar um botão Editar Typescript
Estou começando na programação e estou com dificuldades em fazer um botão editar, no caso quero que ele seja pressionado e me possibilite alterar a tarefa e depois salvar.
\App.tsx
import {...
-1
votos
1
resposta
46
visitas
Como deixar uma props opcional em um componente do React JS?
Tem um compoente que recebe as propriedades de um json como props, entretanto esse componente terá de receber propriedades de outro json quando o tema mudar. A questão é que no primeiro json tem ...
0
votos
0
respostas
17
visitas
Como posso pegar as imagens selecionadas do explorador de arquivos?
Tenho esse trecho de código e queria pegar a imagem selecionada pelo usuário e colocar no background do componente personalizado . Abaixo está uma amostra de como eu queria que ficasse
<StyledPaper&...
0
votos
0
respostas
10
visitas
Pegar thow new Error no react native
Na minha api tenho um thow new Error:
throw new Error("Esta mesa está sendo utilizada no momento!!")
como faço para pegar no catch no react native?
console.log(error) não funciona so mostra ...
0
votos
0
respostas
36
visitas
Usar o .innerHTML no Reactjs TypeScript Possivelmente, o objeto é 'nulo'.ts(2531)
Estou fazendo essa aplicação que recebe um Json de uma API. Preciso enviar os dados dessa resposta para um component que mostrará os dados formatados.
Como os dados só aparecem após a requisição, ...
1
voto
1
resposta
58
visitas
ReactJS - Onclick abrir somente 1 componente do map
Tenho com array de objetos, onde cada objeto se transforma em um card. Ao dar um map e usar o onClick, quando clico no botão de um card, o onclick é ativado em todos os outros cards. Eu queria que ao ...
-1
votos
1
resposta
161
visitas
Usar script JavaScript em um component um ReactJS
Estou fazendo uma aplicação web em react.js e estou precisando rodar um script em js que faz uma busca filtrando automaticamente.
A searchbox é um component do react e preciso rodar um js externo pra ...
0
votos
0
respostas
32
visitas
Pagina não abre no topo - Reacr router dom
Pessoal estou com um problema ao utilizar o react-router-dom 6.
O meu arquivo de rotas é este:
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import './...
0
votos
1
resposta
43
visitas
Use state retorna undefined
não entendo por que meu state não tras nada no params, mas funciona no console.log
useEffect(() => {
async function loadProducts() {
const response = await api.get('/product/category', {...
0
votos
0
respostas
24
visitas
Problema para enviar os dados formulário ReactJS
Pessoal estou com a seguinte problema. Tenho um formulário com react-hook e estou tentando enviar uma requisição para salvar os dados, porém estou recebendo o erro : "Request failed with status ...
-2
votos
1
resposta
65
visitas
Como retornar HTML no Javascript
Tenho um código que é um botão, este botão tem que ficar oculto caso uma variável booleana esteja em falso, logo, a minha ideia do código seria algo assim :
<div className="row">
{...
-2
votos
1
resposta
87
visitas
(node:24) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] em produção apenas
Tenho um projeto em reactjs, tudo estava bem até eu fazer meu ultimo deploy, ele até faz o build, mas quando vou ver nos logs:
(node:24) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] ...
-2
votos
1
resposta
100
visitas
Rotas do ReactJs Nao aparecem quando subo para produção
Estou desenvolvendo um site usando react e vite. Usei o react-router-dom pra criar as rotas,quando estava desenvolvendo, as rotas funcinavam normalmente. mas quando rodei o build e fiz a hospedagem no ...
0
votos
1
resposta
20
visitas
Chamar função em componente no React ES2016
Tenho a seguinte estrutura de componentes:
< game>
< board>
< cell>
</ board>
</ game>
Tenho uma função chamada Bomb() no componente game:
function Game(){
....
...
-3
votos
1
resposta
63
visitas
Quando clico no botão de Link, todo o conteudo da pagina anterior é exibido
Estou fazendo um site e preciso clicar em um botão e abrir uma nova pagina e nessa pagina queria que tivesse SOMENTE a section desse component, porem quando eu clico nesse Link, todo o conteudo que ...
-2
votos
1
resposta
40
visitas
Cannot read properties of undefined (reading 'excluirTask')
Estou querendo implementar a funcionalidade de excluir individualmente o itens de uma lista, mas quando chamo a função excluirTask (ainda não implementada) ocorre o erro Cannot read properties of ...
-4
votos
1
resposta
30
visitas
Está Selecionando todos <li> com condicional Styling (React)
Estou Com problema , estou desenvolvendo uma lista de tarefas em React , só que na hora de sublinhar tarefas , ele sublinha todas até as que não estão marcadas no checkbox
abaixo vou disponibilizar o ...
0
votos
1
resposta
52
visitas
Para que serve o AuthContext.Provider?
Me deparei com a seguinte linha de código e estou querendo saber o que o AuthContext.Provider faz com esses values o children
<AuthContext.Provider value={{ signIn, user, logOut, techs, setTechs }}...
0
votos
1
resposta
30
visitas
Como remover apenas os itens selecionados de uma lista ToDo?
Eu estou criando uma lista "To Do" em react, e estou buscando um meio de remover apenas os itens com o input selecionados. tem como fazer isso?
segue uns pedaços do código.
Detalhe, o id do ...
-3
votos
1
resposta
62
visitas
Porque a função após o map executa primeiro?
Estou aprendendo um pouso sobre React, e esse tipo de situação já me ocorreu várias vezes, já procurei sobre async/await, promisses e coisas semelhantes, porém eu gostaria de entender o porque isso ...
0
votos
0
respostas
30
visitas
Como saber qual a página atual dos meus dados vindos da API?
Fiz a integração de uma API, mas ela não tem endpoint de "page" para saber qual é a página atual que está.
Com base nisso, gostaria de uma ajuda para criar algo para descobrir a página atual ...
0
votos
0
respostas
8
visitas
Axios ignorando : em urls
Estou tentando fazer requisições para a api:
https://core.ac.uk:443/api-v2/
quando jogo no axios assim:
import axios from "axios";
const api = axios.create({
baseURL: "https://core....
0
votos
0
respostas
16
visitas
Replace enquanto realiza filtragem
Estou tentando realizar um replace enquanto faço a filtragem de itens da minha api. Gostaria de remover os ATIVO do NameChange quando o ATIVO for encontrado na string e retornar o nameChange.
Segue o ...
-3
votos
1
resposta
297
visitas
Como usar o history no react-router-dom v6
alguém sabe como uso o history do react-router-dom v6
Eu vi em um projeto aqui um pouco antigo usando a v5 do react-router-dom
Que basicamente se fazia assim
#file history.ts
import { ...
-2
votos
2
respostas
88
visitas
useState grava dois arrays, um vazio e um com os dados que eu quero, como faço para pega-los?
Estou usando uma função get files que pega os files na api e executando no useEffect, quando au atribuo o retorno da função ao setSlideCategory e dou um console log ele retorna isso:
console.log()...
-1
votos
0
respostas
19
visitas
useState retorna 2 arrays, como faço para pegar o array com o conteúdo, sendo que esta vazio? [fechada]
Aqui está meu código
var [slideCategory, setSlideCategory] = useState([])
async function getFiles() {
const load = new LoadFile()
await load.loadFiles()
.then((res) => {
...
0
votos
0
respostas
15
visitas
Preciso fazer um POST para um nova venda e esta dando erro ao passar os objetos cliente e produto em REACT.js
Estou fazendo um sistema de controle de uma Biblioteca, e estou com dificuldade em cria uma nova venda.
A classe venda possui os atributos id, quantidade e preço mais os objetos cliente e um livro.
&...
0
votos
1
resposta
27
visitas
Como reproduzir algo dentro do useEffect ReactJS sem virar um loop?
Meus caros, estava fazendo um exemplo que vi na internet onde o client faz a consulta pela api, e o get do axios é inserido dentro do useEffect que fica escutando caso haja novo valor no banco e já ...
0
votos
1
resposta
67
visitas
React renderizando componente na hora errada
Tenho uma página com 3 componentes em cascata (um abre dentro do outro), divididos por classes, só que ele tá renderizando antes de clicarmos em adicionar. O que pode ser?
Função que renderiza os ...
0
votos
1
resposta
41
visitas
Qual a melhor forma de ler arrays aninhado dentro de um objeto?
Tenho o seguinte objeto:
const [json, setJson] = useState({
tags: [
{
key: "",
value: ""
}
],
tagLists: [
{
name: "",...
-1
votos
1
resposta
44
visitas
Renderizar uma quantidade passada por props para um Componente
Como posso renderizar uma quantidade de elemento passada por props para o Componente?
function App() {
return (
<div className="App">
<Cards amount={4}></Cards>
...
-2
votos
2
respostas
281
visitas
Erro no React.js - Warning: Each child in a list should have a unique "key" prop
Olá, devs!
Estou usando Vite e Reactjs com Typescript.
Estou com a seguinte mensagem de erro no console do chrome:
Warning: Each child in a list should have a unique "key" prop.
Check the ...
-1
votos
1
resposta
30
visitas
Trocar ícone de botão de acordo com status
Possuo uma tabela de orçamentos e quando o orçamento estiver aprovado preciso que o ícone fique cinza e quando estiver com o status aguardando o ícone será azul, esses ícones são imagens que estão na ...
-2
votos
1
resposta
94
visitas
React - como faço para um input de um componente buscar uma lista que está em outro componente?
Criei um input para realizar uma busca de alunos numa lista, esse input está no componente Header, ele todo está assim:
function Header() {
return (
<header className='header'>
...
-2
votos
1
resposta
36
visitas
Mudar body da aplicação inline ReactJS
Olá, pessoal. Além de mudar o img com o id='pikachu' quando o usuário clicar três vezes no h1PIKACHU eu gostaria de mudar o body da aplicação para a mesma imagem. Alguém poderia me ajudar? O código ...
-2
votos
1
resposta
44
visitas
Como unir o contador de cliques com uma função que modifica a imagem em ReactJS?
Olá, pessoal. Estou tentado adicionar um easter egg a minha pokedex. Quando o usuário clicar três vezes na imagem do pikachu o background da aplicação deverá mudar. Já consegui adicionar o contador de ...
-2
votos
1
resposta
49
visitas
Ao clicar em um botão os outros também são selecionados junto
Estou tentando criar um programa em React em que o usuário poderá escolher salas de acordo com os horários. Ele não poderá escolher mais de uma sala por horário. As informações das salas vem por meio ...
-2
votos
1
resposta
48
visitas
O que significa isso no reactjs // eslint-disable-next-line import/no-anonymous-default-export
Pessoal sempre que crio uma função igual essa embaixo ele fica em amarelo alerta só sai quando eu acrescento esse comentário que o vscode me mostra alguém sabe pq?
import React from 'react'
import './...
-1
votos
1
resposta
46
visitas
Não consigo capturar um valor específico do json
Estou tendo o seguinte problema com meu código, que quando eu chamo um campo do meu json ele mostra todas as listas com todos os dados.
useEffect(()=>{
fetch('http://localhost:5000/...