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>
);
}