Perguntas com a tag [jsx]
JSX é uma extensão de sintaxe para JavaScript usada em React.js, Vue.js e outros frameworks JavaScript que permitem uso de XML junto com código JS para descrever elementos HTML
42
perguntas
-2
votos
1
resposta
46
visitas
habilitar e desabilitar butão em react
estou fazendo um quis de perguntas em react, na qual faço uma requisição pro banco e ele retorna as pergunta e assim eu crio o front, só que o botão de responder eu só quero que seja ativado quando o ...
-3
votos
1
resposta
154
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 ...
-1
votos
1
resposta
46
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>
...
0
votos
0
respostas
27
visitas
Input fica interrompendo tudo o que está sendo digitado
Tô com um probleminha, estou fazendo um projeto semelhante ao WhatsApp, (uma caixa de diálogo, onde recebe dois inputs e um button, após o usuário digitar primeiramente seu nome e depois seu texto, e ...
1
voto
0
respostas
12
visitas
Exibir um type numered-list de um graphql
Olá! Estou com enorme dificuldade de chegar nos dados de uma uma numbered-list de um richtext pelo 'graphcms'(um CMS) para exibir em um blog com nextjs, formatado.
Eu consigo chegar até o type por um ...
-2
votos
1
resposta
270
visitas
Imagem não está aparecendo na página (não está sendo encontrada)
Oi, preciso de ajuda, estou usando create-next-app e a imagem que estou tentando colocar na página index não está sendo encontrada, aqui está o código:
E aqui a organização das pastas:
Não sei o que ...
-2
votos
1
resposta
94
visitas
Arquivo .js funciona, componente .jsx não funciona
em um arquivo .js quando vou no meu botão html e chamo a função main, tudo roda belezinha.
Agora se eu transformar em um arquivo .jsx (react) como um componente, quando chamo a função main ele mostra ...
0
votos
2
respostas
1mil
visitas
Como listar resultados da requisição feita em uma API REST utlizando React com Axios?
Boa tarde, estou aprendendo a desenvolver em React e TypeScript, mas encontro dificuldades para implementar uma solução que envia uma requisição GET para a API REST e retorna dados para o projeto de ...
0
votos
2
respostas
611
visitas
Como passar um objeto especifico como props em uma geração de componentes?
Olá, estou inciando os estudos em React e ao tentar criar um código que gerasse componentes(neste caso o "Box")em que ao clicar de um botão passando objetos vindos de um state até um props, ...
0
votos
1
resposta
27
visitas
Elementos JSX incluidos em closing tag
Ao criar a div com o nome de SERVIÇOS exibe o seguinte erro:
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
<div id="start"&...
0
votos
1
resposta
1mil
visitas
Percorrer um .map () em dentro de .map () React jsx
Estou usando o React com TypeScript.
É possível ir array que está dentro de um array?
Este é o meu array:
const menu: Array<{name: string; to: string; icon?: ReactNode; submenu?: any}> = [
...
0
votos
1
resposta
283
visitas
Erro ao tentar renderizar componente com operador condicional ternário no REACT
Esse é o meu componente
{portaisAtuais
.filter(portal => !portais.includes(portal.id))
.map((portal, index) => {
const { nome, id } = portal
...
0
votos
1
resposta
684
visitas
Alterar campo dinamicamente no ReactJs
Estou desenvolvendo um projeto, e ao digitar um valor em um campo necessito que o outro campo seja alterado com base nos valores que defini em uma função, aqui está o código:
constructor(props) {
...
-3
votos
1
resposta
1mil
visitas
Usar componente ao clicar em botão no jsx [fechada]
Estou tentando renderizar o componente Feed dentro desse Main no jsx, mas não estou conseguindo.
Segue o código:
function Feed(props){
return(
<main className='post'>
...
0
votos
1
resposta
85
visitas
É possível enviar tags JSX do NodeJs(backend) para o ReactJs?
Preciso enviar um dado ao frontend, mas preciso que ele já esteja com determina tag em volta dele, por exemplo...
dado backend:
Nome: Gabriel
preciso que chegue ao front dessa maneira:
<div>...
1
voto
1
resposta
595
visitas
Por que React não aceita camelCase para nomear componentes?
Estava preparando uma componente cuja única função era exportar uma tag <p> contendo um texto. Naturalmente criei uma função que exportava o texto:
import React from 'react';
function ...
-1
votos
1
resposta
162
visitas
Exibir inputText de acordo com a quantidade selecionada no Picker React-native
Tenho o seguinte problema.
Tenho um componete Piker com a quantidade e quero que a partir da seleção da quantidade eu obtenha o mesmo numero de TextInput definido pela seleção da quantidade.
...
-2
votos
4
respostas
1mil
visitas
getElementById no React/JSX
Iniciei meus estudos de React ontem então não tenho muito conhecimento sobre, e gostaria de saber como dar um document.getElementById() em React/JSX, como faço isso?
Tentei usar document....
2
votos
1
resposta
6mil
visitas
Como passar Informações de um componente funcional filho para um pai React?
Estou desenvolvendo uma aplicação com o React com Hooks e componentes funcionais, e me deparei com a seguinte logica: eu preciso renderizar em tela dos componentes funcionais, ambos com arrays de ...
1
voto
1
resposta
2mil
visitas
React não renderiza resultado deste código
Estou estudando React e estou com um problema, mais precisamente na parte de estado, onde meu código não renderiza na tela. Neste caso tenho um h1 e um ul e nenhum deles aparecem na tela, mas se eu ...
1
voto
2
respostas
3mil
visitas
Espaçamento no JSX
Estou com um arquivo JSX e preciso da um espaço entre o {item.payment.bucket} e OU. No HTML seria mais ou menos assim:
{item.payment.bucket} OU.
Meu código JSX:
<ValueDiv>
<...
-1
votos
1
resposta
591
visitas
Como criar um componente container de outros componentes
Boa tarde!
Estou tentando criar um componente que contem divs que estilizam os componentes dentro. Só que são 3 divs e não quero replica-las toda vez que eu for usar, então pensei em criar um ...
3
votos
1
resposta
888
visitas
Como fazer validação de um array se ele possui objetos dentro dele ou não? React JS
Tenho um código feito usando React JS e funciona assim, tenho um componente select, e este é reutilizado várias vezes e as informações que ele recebe sempre vem de um array, só que agora preciso ...
-2
votos
1
resposta
127
visitas
Erro ao acessar propriedade com a funcão map
Quando tento acessar as propriedade this.props.arrayMenu me exibe o seguinte erro:
Uncaught TypeError: Cannot read property 'id' of undefined.
conforme imagens abaixo:
import React , { ...
2
votos
1
resposta
552
visitas
Acessar uma lista dentro de uma lista em react jsx
Olá, eu sou um novato em React e estou fazendo uma requisição via axios. Essa requisição me retorna o seguinte JSON:
depois de receber essa lista eu faço um .map na lista e ele me retorna o seguinte:...
0
votos
0
respostas
562
visitas
Ajuda com imagens dinâmicas no ReactJS
> Meu código está retornando o valor em string no console, porem não retorna a imagem mesmo o caminho estando certo no scr. Não sei qual meu erro.Peço ajuda sou novato na linguagem. abaixo está meu ...
0
votos
5
respostas
1mil
visitas
Como excluir apenas um determinado dado de um estado React
Hoje tenho a seguinte constante:
const alunos = [{
id: 1,
nome: 'Julia',
curso: 'Enfermagem',
}, {
id: 2,
nome: 'Isabela',
curso: 'Veterinária'
}]
porém eu precisaria apagar apenas o dado do ...
1
voto
1
resposta
45
visitas
Como setar um estado que está em uma constante com React com uma função
Tenho o seguinte trecho de código:
const [aulas, setAulas] = React.useState([{
id:1,
title: 'Aula 1',
descricao: 'Matemática',
}, {
id:2,
title: 'Aula 2',
descricao: 'Portugues',
}])
function ...
-1
votos
1
resposta
1mil
visitas
React Hooks + Socket.io
Estou usando os React Hooks para uma aplicação simples, um clone do feed do Instragam. Para fazer as requisições de cada post na api, estou usando essa lógica:
function Feed() {
const [posts, ...
3
votos
1
resposta
533
visitas
Separar JSX do componente - React Native
Existe alguma forma de, no React Native, colocar todo o JSX em um arquivo separado sem ter risco de diminuir a performance do App?
Tipo o Angular que tem um arquivo para o HTML, outro para o CSS e ...
2
votos
0
respostas
150
visitas
Adicionar Objeto Array Subdocumento Reactjs e Mongodb
Senhores,
Por gentileza, podem me ajudar com esta duvida?
Resumo: Estou criando um mini app utilizando node/mongo/react. Este app utiliza relacionamento no Mongo e gostaria de ajuda para adicionar ...
2
votos
1
resposta
160
visitas
Carregar o valor do state no componentDidMount formatado por moeda
Estou querendo carregar um valor definido no state da aplicação.
Usando um lib para formatar o input e colocar mascara de moeda formato Real (react-intl-currency-input).
Só que ele não carrega o ...
0
votos
1
resposta
3mil
visitas
Consumir dados e fazer Formulário Dinâmico com o React
Preciso consumir os dados de um webservice para criar uma interface de formulário para preenchimento dinâmica, ou seja, que deva se adaptar a estrutura do formulário recebida pelo webservice e não ser ...
0
votos
0
respostas
879
visitas
Executar uma função e se demorar mais que x segundos da erro - React Native
Boa tarde!
Fiz uma função que busca os dados de um JSON na Web, porém queria envolve-lo numa função que se demorasse mais que por exemplo 10 segundos explodisse um erro na tela, atualmente a página ...
0
votos
1
resposta
7mil
visitas
Passar informações entre componentes sem hierarquia ReactJS
Como passar informações entre componentes no React como props ou status.
Nessa situação tenho um botão e um menu. O menu deve ser aberto toda vez que o botão ser clicado.
Botão
import React, { ...
3
votos
1
resposta
2mil
visitas
Como alterar estado de objetos complexos no React?
tenho o seguinte objeto:
obj = {
title: "obj1",
tab: [{
title: "titulo da tab 1",
card: [{
title: "card1",
url: "url",
image: "image"
},
{
...
0
votos
1
resposta
219
visitas
Snippets HTML para JSX
Alguém sabe onde posso conseguir Snippets HTML para usar no JavaScript?
Exemplo:
input: h1 + tab
output: <h1></h1>
1
voto
1
resposta
100
visitas
Erro de sintaxe Adjacent JSX React
Criei um componente que há seis imagens porém ao compilar o meu código me retorna o seguinte erro.
E este é meu código fonte do componente ImovelPhotos
import React from 'react';
function ...
1
voto
1
resposta
586
visitas
Repetir áudio toda vez que botão for clicado - Javascript e HTML
Quero que o áudio repita do inicio toda vez q o botão for pressionado. Ao invés disso ele só repete após o áudio terminar.
(OBS: Estou usando JSX)
Javascript
playShot() {
var audio = document....
1
voto
1
resposta
125
visitas
Syntax Erro. Unexpected token '=' no React
Quando tento rodar o dev-server ele me retorna um erro no console que eu não consigo identificar o que está gerando ele
webpack.config.js
iconst path = require('path');
module.exports = {
entry: './...
5
votos
1
resposta
232
visitas
Bug ao reordenar lista de componentes React
Tenho um componente que carrega uma lista de componentes <ComponenteReordenavel> que é reordenado de acordo com o gosto do usuário. O bug acontece quando eu modifico o style desse componente e ...
11
votos
2
respostas
17mil
visitas
Como comentar bloco de código em JSX (React)
Quero saber se é possível comentar um bloco de código dentro do método render() no React, tentei de todas as formas que conheço e nenhuma deles funcionou.
render() {
return (
<div ...