How to run multiple functions at React.js?

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;

Miroslav Papírník · Accepted Answer · 2022-09-13 11:02:57Z

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} />

edited Sep 13, 2022 at 11:02

answered Sep 13, 2022 at 10:22

Miroslav Papírník

7775 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reifocs Over a year ago

should pass e.target.value to lightOn, setstate is asynchronous so the brightness_value will be stale

Miroslav Papírník Over a year ago

@Calfut thx. I overlooked the value is passed to the setLightOn func. Snippet updated.

Tomoe · Accepted Answer · 2022-09-13 10:28:19Z

-1

You should use the state to drive the view of the view to do

Just add

useEffect(() => {
  lightOn()
}, [brightness_value])

answered Sep 13, 2022 at 10:28

Tomoe

4164 silver badges12 bronze badges

3 Comments

Reifocs Over a year ago

effects should be avoided when possible, here calling in event handler is more efficient

asynts Over a year ago

If I understand the question correctly, the lightOn function should be called when the value is changed. However, this will also fire when the component is rendered for the first time. useEffect should be used if some side effect needs to occur after the page is rendered. To optimize this, it's possible to specify that it should only run if some value changed, this is not supposed to be used to emulate event handlers.

Tomoe Over a year ago

@asynts yeh, you are right

Collectives™ on Stack Overflow

How to run multiple functions at React.js?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related