How to run multiple functions at React.js? - reactjs

Question

Currently, I'm making a system that can control home electrical equipment on the web.
Backend is ready,
I'm trying to implement a function to adjust the brightness of the light with a slider.
I can set brightness_value variable is assigned a number from 0 to 100 when the slider is moved with the code below.
<input type="range" name="speed" min="0" max="100"
value={brightness_value} onChange={(e) => setBrightnessValue(e.target.value)}></input>
The problem is that I want to fire the lightOn function at the same time as I move the slider but I don't know what to do.
(I'm already using onChange, so can't I use it?)
LightDetail.js
import React, { useState, useEffect, useCallback, onClick} from 'react';
import axios from 'axios';
import ic_light from "../../images/icons/ic_light.png"
const LightDetail = () => {
const [light, setLight] = useState([]);
const [brightness_value, setBrightnessValue] = useState();
// set light strength
const lightOn = async(data) => {
await axios.post('xxx.com/light/turn_on',
{
brightness: brightness_value
},
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${cookies.get('accesstoken')}`
},
})
.then(result => {
console.log('Turn on!');
getDevices();
})
.catch(err => {
console.log('Turn on Missed!');
});
}
// get light data from backend
const getDevices = async(data) => {
await axios.get('xxx.com/device_listr',
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${cookies.get('accesstoken')}`
},
})
.then(result => {
console.log(result.data)
setLight(result.data.attributes.light);
})
.catch(err => {
console.log(err);
});
}
useEffect(() => {
getDevices();
}, []);
return (
<div className="container">
<div className="row mx-auto text-center">
<>
{light.map((item,i) =>
<div key={i} className="col-12">
<div className="box h-100">
<img className="" src={ic_light} />
<input type="range" name="speed" min="0" max="100"
value={brightness_value} onChange={(e) => setBrightnessValue(e.target.value)}></input><br></br>
<Link to={`/device_list`} className='btn btn-primary col-4'>Back</Link>
</div>
</div>
)}
</>
</div>
</div>
);
}
export default LightDetail;

Answer 1

You can define onChange as a custom event handler where you can do whatever.
Example snippet:
const handleSliderChange = (e) => {
setLightOn(e.target.value)
setBrightnessValue(e.target.value)
}
...
<input type="range" name="speed" min="0" max="100"
value={brightness_value} onChange={handleSliderChange} />

Answer 2

You should use the state to drive the view of the view to do
Just add
useEffect(() => {
lightOn()
}, [brightness_value])