Pass data from component to Util file

Question

I'm trying to pass data from one React component to another and trying to understand how to call this data to the target file

Basically you want to pass the <input /> value from component.js to a function in the Util.js file.

So far I have tried the following in component.js:

const [distance, setDistance] = useState();

function handleChange(value){
    setDistance(value.target.value);
}

return {
    <input className="input" name="distance" type={`number`} onChange={handleChange} />
}

Util.js

export const filterByDistance = function(){       
}

So to call it do I need to do something like this?

import {distance} from './component.js';

Answer 1

Don't try to import variables from component.js into Utils.js, you should do it the other way around: into the Util.js function Import component.js and call it.

import { filterByDistance } from './Util.js';

const [distance, setDistance] = useState();

function handleChange(value){
    setDistance(value.target.value);
    filterByDistance(value.target.value)
}

return { ... }

Then accept the value as parameter:

export const filterByDistance = function(value){
    console.log(value)
}