-3

Estou realizando alguns testes em React, queria saber se teria alguma forma de renderizar/atualizar um componente sempre que existe alteração no props dele(variável):

import { React, useState, useEffect } from "react";
import Buscaresultado from "../../utils";

const Eventos = () => {
  const [eventos, setEventos] = useState('teste');
  
  return (
    <div>
      <div>
        <label>Busque algum evento:</label>
        <input
          type="text"
          placeholder="Insira o nome de algo"
          value={eventos}
          onChange={(e) => {
            setEventos(e.target.value); 
          }}
        />      
        <Buscaresultado props={eventos}/>
      </div>
    </div>
  );
};

export default Eventos;

A ideia é: sempre que inserir uma letra no input o componente "BuscaResultado" seja redenrizado com o novo valor completo digitado.

Componente Buscaresultado

import { React, useState } from "react";
import api from "./api";

function Buscaresultado({ props }) {
  const [resultado, setResultado] = useState(props);

  console.log(resultado);
  return (
    <div>
      <h1>{resultado} Teste</h1>
    </div>
  );
}
1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 9/04/2022 às 0:40

2 Respostas 2

0

É muito simples fazer com que o outro componente recebe um valor atualizado pelo componente mais acima, o problema inicial do seu código é colocar um palavra reservada props como sendo um propriedade do componente, porque essa palavra é utilizada como padrão para resgatar propriedades de qualquer componente. Observe que no código que eu fiz como exemplo que a propriedade é text e no componente mais interno eu utilizo props.text (sem desestruturação).

Exemplo


function Container(props){
  return (
    <div>{props.text}</div>
  )
}
function App() {  
  const [text, setText] = React.useState('Teste');  
  return (
     <div>
      <div>
        <input type="text"
         onChange={e => setText(e.target.value)}
         value={text} />       
      </div>
      <div>
        <Container text={text} />
      </div>
    </div>    
  );
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Então na verdade o seu código para ajustar essas observações:

function Buscaresultado(props) {    
  return (
    <div>
      <h1>{props.resultado}</h1>
    </div>
  );
}

const Eventos = () => {
  const [eventos, setEventos] = React.useState('teste');  
  return (
    <div>
      <div>
        <label>Busque algum evento:</label>
        <input
          type="text"
          placeholder="Insira o nome de algo"
          value={eventos}
          onChange={(e) => {
            setEventos(e.target.value); 
          }}
        />      
        <Buscaresultado resultado={eventos}/>
      </div>
    </div>
  );
};
ReactDOM.render(<Eventos/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Faltou um pouco de conhecimento de props, segue alguns links para estudo:

0

Existem dois metodos, o primeiro é você passando 'props' direto para a tag html, e o segundo que é usando o hook 'useState' com o 'useEffect'.

Quando você monta o componente ele atribui a 'props' ao 'state' resultado,e mesmo se o 'props' for alterado não irá modificar nada pois o 'state' só atribui quando monta o componente, então você tem uma segunda opção utilizar o 'useEffect', useEffect(()=>{ setResultado(props) },[props]) , assim toda vez que a 'props' alterar ele vai fazer o update do componente todo denovo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .