podrias mejorar mucho mas tu codigo y sacarle provecho a React. Te explico mas a detalle y te doy la solucion tu problematica.
Lo primero, es que podrias hacer uso del Hook que nos provee React llamado useState()
que basicamente permite al componente tener un "estado" que almacena ciertos valores. Te dejo un ejemplo de como declararlo:
import React, { useState } from "react";
export default function App() {
// Nuestro Hook de estado
const [values, setValues] = useState({
activeFilter: '',
bussFilter: ''
});
return (
<h1>Hello World</h1>
);
}
A nuestro Hook le podemos aplicar array destructuring para extraer dos valores [valor, funcion]
. El valor es el valor actual de nuestro State, mientras que la funcion nos permite alterar dicho State (no se puede modificar directamente).
Ahora, manejemos dichos valores con los dos inputs que tienes, para ello creamos la misma funcion llamada handleChange
.
import React, { useState } from "react";
export default function App() {
const [values, setValues] = useState({
activeFilter: '',
bussFilter: ''
});
const handleChange = e => {
console.log('the input is changed');
}
return (
<div>
<input onChange={handleChange} type="text" name="activeFilter" />
<input onChange={handleChange} type="text" name="bussFilter" />
</div>
);
}
Hasta este punto, todo es normal o entendible, unicamente creamos una funcion llamada handleChange que se ejecuta cada que nuestros dos inputs cambian, el siguiente paso, es almacenar el valor de cada input.
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [values, setValues] = useState({
activeFilter: '',
bussFilter: ''
});
const handleChange = e => {
setValues({
...values,
[e.target.name]: e.target.value
})
}
return (
<div>
{console.log(values)}
<input onChange={handleChange} type="text" name="activeFilter" />
<input onChange={handleChange} type="text" name="bussFilter" />
</div>
);
}
Ahora, ya estamos usando nuestra funcion para modificar nuestro state, pero como funciona?
const handleChange = e => {
setValues({
...values,
[e.target.name]: e.target.value
})
}
Como nuestro state es un objeto, nuestra funcion recibe un objecto (lo cual es el valor que tendra ahora nuestro state). Hicimos una propagacion o copia del state con ...values
ya que si no lo hacemos eliminaremos el valor del otro input que tenemos, despues, hacemos una asignacion dinamica del key del objeto y a esta key le agregamos el valor del input.
Ahora, nuestro state luce de la siguiente forma:
{
activeFilter: 'esto es un filtro',
bussFilter: 'otro filtro'
}
Obviamente los datos seran los que haya en tu input.
Una vez que ya tenemos los datos, podemos enviarlos a cualquier componente mediante props, por lo cual unicamente debemos hacer lo siguiente:
return (
<OtroComponente values={values}/>
);
Para extraer dichos valores unicamente debemos hacer:
const MyApp = ({ values }) => {
return (
<>
<p>{values.activeFilter}</p>
<p>{values.bussFilter}</p>
</>
)
}
Espero esto sea lo que buscas, y te haya servido, cualquier duda puedes comentarme!