Skip to main content

Respostas interessantes marcadas com a tag

13 votos
Aceito

Como comentar bloco de código em JSX (React)

Para comentar em jsx, deves colocar chavetas à volta dos comentários, de resto é como fizeste no teu segundo exemplo (/* Não funciona */): {/* COMENTÁRIO JSX */}
Miguel's user avatar
  • 29,5mil
9 votos

Como comentar bloco de código em JSX (React)

Podes ler sobre isto na documentação do React, mas basicamente há 4 tipos diferentes. Fiz um jsFiddle de exemplo aqui: https://jsfiddle.net/mk50r5qt/ O código é: var Span = React.createClass({ ...
Sergio's user avatar
  • 135mil
6 votos
Aceito

State retornando valor errado / atrasado

O setState é assíncrono Esse é o comportamento esperado. Chamadas ao setState são assíncronas, o React busca realizar uma atualização em lote (batch) para causar menos renderizações. Tendo em vista ...
Rafael Tavares's user avatar
3 votos
Aceito

Como usar o hook do React useRef com o componente NumberFormat?

De acordo com a documentação do próprio componente, como ref é uma propriedade especial do React, você está pegando a referência do componente NumberFormat, e não do input. Para pegar a referência do ...
Rafael Tavares's user avatar
3 votos
Aceito

Destruir componente React (Unmounting Component)

A maneira de desmontar um componente é com ReactDOM.unmountComponentAtNode. Esse método aceita o elemento DOM em que o componente está montado. Se não tens uma referência do elemento podes passar ...
Sergio's user avatar
  • 135mil
2 votos
Aceito

Componente é renderizado novamente sempre que estado de algum input é alterado

Utilize com componente e a função memo que previne esse reenderização: const Email = React.memo(({value, setValue}) => { return ( <div> <div style={{height: 20}}>{...
novic's user avatar
  • 36,7mil
2 votos
Aceito

Bug ao reordenar lista de componentes React

Dois problemas que podem ser os responsáveis pelo bug. Você está usando o índice como key. O React utiliza a key para realizar seu algoritmo de atualização do DOM da forma mais eficiente possível. ...
Leandro Oriente's user avatar
2 votos

Ordenar array dentro de outro array com ReactJS

Vou dar uma solução alternativa a outra resposta, pois ela usa o useEffect e não sei se você pretende usar este hook. Basicamente você pode seguir 3 passos: Criar uma funcão que calcula SomaAD para ...
Cmte Cardeal's user avatar
  • 6.981
2 votos
Aceito

Ordenar array dentro de outro array com ReactJS

Crie um novo estado chamado sumary para fazer o resumo do array do estado players e a mesma operação que é feita direto na tabela faz em algum método ou quando carregar o componente. Na sumarização ...
novic's user avatar
  • 36,7mil
1 voto
Aceito

Problema ao renderizar o component que possui uma função no useEffect

O useEffect pode ser desconsiderado se você retornar false. Você pode incluir uma checagem no início do useEffect: useEffect(() => { if(codicao) return false }, [])
Ricardo Silva's user avatar
1 voto
Aceito

Problema de "chave" Única React

Para resumir, o React pede que seja passado uma prop key para todo componente que esteja dentro de uma lista. Segundo a própria documentação do React As chaves ajudam o React a identificar quais ...
Gabriel José de Oliveira's user avatar
1 voto
Aceito

onClick em componentes criados dinamicamente React

Tens de corrigir os "bindings", ou seja garantir que o contexto de execução é o correto. Podes fazer isso assim: constructor(props){ super(props); this.addBetCard = this.addBetCard.bind(this)...
Sergio's user avatar
  • 135mil
1 voto

Como estruturar pastas e arquivos React Js?

Nesse caso acredito que você deveria estudar design patterns, já que entender isso é exatamente o que sua dúvida busca. Recomendo você dá uma olhada no modelo Fractal - Uma estrutura de aplicativos ...
William Mendes's user avatar
1 voto
Aceito

Como estruturar pastas e arquivos React Js?

Particularmente eu gosto de utilizar a estrutura abaixo. Separo components (componentes realmente reutilizáveis em qualquer ponto da aplicação), pages (as páginas), services (qualquer acesso externo), ...
Colasanto's user avatar
  • 440
1 voto

Como estruturar pastas e arquivos React Js?

O React Js é a base de componentes, certo? Sim, segundo o próprio site: Baseado em componentes - Crie componentes encapsulados que gerenciam seu próprio estado e então, combine-os para criar UIs ...
novic's user avatar
  • 36,7mil
1 voto

Como utilizar o ReactDOM para criar buttons através de condições

Podes tratar esses botões como uma array e usar if para acrescentar botões a essa array. Depois para inserires esses botões dentro do componente basta {botões}. Nota que a tua array, assim como está "...
Sergio's user avatar
  • 135mil
1 voto

ReactJS - setState não funciona com o primeiro Valor no onClick

Isso acontece porque os updates dos valores do estado do componente não acontecem imediatamente após o setState ser executado - o valor só muda na ocasião do próximo render. Você pode verificar isso ...
Rodrigo Deodoro's user avatar
1 voto
Aceito

Componente em ReactJs re-renderizando componentes filhos sem necessidade, como contornar isso?

Tem sim, com o React.memo (ou em classes com PureComponent que compara o state e props superficialmente, tomando os devidos cuidados com objetos complexos, ou seja, esse recurso são para componentes ...
novic's user avatar
  • 36,7mil
1 voto
Aceito

Como seria o mesmo código em ReactJs utilizando Hook para resgatar o inicio da criação do componente?

Para ter o mesmo efeito utilize o useEffect com um array sem nenhum item, como exemplo abaixo: function Example() { const [count, setCount] = React.useState(0); const handleIncrement = () =>...
novic's user avatar
  • 36,7mil
1 voto
Aceito

A propriedade 'data' não existe no tipo 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. ts(2322)

O state deve ser inicializado dentro do construtor da classe: import React, {Component} from 'react'; import Graph from './components/Graph'; interface Props{} export default class App ...
mari's user avatar
  • 1.290
1 voto
Aceito

Redirecionamento após post em api com axios em ReactJS

Se você estiver usando react-router-dom você pode usar this.props.history.push('/your-path'). /your-path é o caminho que você definiu nas suas rotas que renderiza o componente de dashboard.
Natan Severo's user avatar
1 voto
Aceito

Como criar um componente React de select que no evento de bind "change" pegue o valor certo que foi selecionado?

Estás quase lá, o problema é que estás a sobre escrever o array quando devias setar o value. Na prática o código que tens cria isto: this.setState({ typeOfSearch: 'debuts' }); e isso não é o que ...
Sergio's user avatar
  • 135mil
1 voto
Aceito

Adicionando componente dinamicamente no React

Para renderizar um componente react, intencionalmente não se pode usar APIs imperativas como element.append. O jeito é mudar seu estado para refletir o que você quer renderizar usando .setState({...})...
yamadapc's user avatar
  • 736

Only top scored, non community-wiki answers of a minimum length are eligible