How can i pass multiple arguments with different components?

Question

I am creating a react page where i need to pass different arguments in the function and that function i am passing as prop to the child component and what i am doing is i have five different calling for the child component and from that i need to get different arguments, So any idea how can i achieve this?

 const leftEyeData = (green,blue,red,int,freq) => {
    if(!green) green = 0;
    if(!blue) blue=0;
    if(!red) red =0;
    if(!int) int =0;
    if(!freq) freq = 0;
    let data = ['R'.charCodeAt(), "l".charCodeAt(), isClickLeftEye ?JSON.parse(green): 0, isClickLeftEye? JSON.parse(blue): 0,isClickLeftEye ? JSON.parse(red): 0, 
    'R'.charCodeAt(),isClickRightEye? JSON.parse(green): 0,isClickRightEye? JSON.parse(blue): 0, isClickRightEye? JSON.parse(red): 0,
    'B'.charCodeAt(),JSON.parse(int),JSON.parse(freq)];
    console.log('emitting EyeData ', data);
    socket.emit('/remote', data, Peripherial);
  }

<div>
  <SliderRange title="Green" rangImgName="green_slider" 
  class='green' disabled
  leftEyeData={leftEyeData} g={'0'}/>
</div>
<div className="RBG-Led-SeekItem1">
  <SliderRange2 title="Blue" rangImgName="blue_slider" 
  class='blue' disabled
  leftEyeData={leftEyeData} b={'0'} />
</div>
<div className="RBG-Led-SeekItem1">
  <SliderRange title="Red" rangImgName="red_slider" 
  class='red' disabled
  leftEyeData={leftEyeData} />
</div>

Child Component Calling:

 const rangeSlider = (e) => {
    let selectorContainer =            document.getElementById("selectorContainer");
    selectorContainer.style.left = e.target.value + "%";
    setChangeRangeValue(e.target.value);
    if(props.class === 'green') setGreen(e.target.value)
    if(props.class === 'blue') setBlue(e.target.value)
    if(props.class === 'red') setRed(e.target.value)
    
    
    if(props.class === 'intensity') setIntensity(e.target.value);
    if(props.class === 'freq') {
      setFreq(e.target.value);
    }
    props.leftEyeData(green, blue, red,intensity,freq);
  };

alaric · Accepted Answer · 2021-03-16 10:18:44Z

1

You can use arrow functions and pass only arguments you have, and in your leftEyeData function use an object arguments allowing you to use named parameters.

For example:

<div>
     <SliderRange title="Green" rangImgName="green_slider"
     class='green' disabled
     leftEyeData={green => leftEyeData({green})} g={'0'}/>
</div>

So your function args would look like

 const leftEyeData = ({green = 0,blue = 0,red = 0,int = 0,freq = 0}) => {

And you can delete

 if(!green) green = 0;
    if(!blue) blue=0;
    if(!red) red =0;
    if(!int) int =0;
    if(!freq) freq = 0;

answered Mar 16, 2021 at 10:18

alaric

1696 bronze badges

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

2 Comments

Apurv Singla Over a year ago

Okay, so how should i call it in the child component, previously i was calling like:

Apurv Singla Over a year ago

const rangeSlider = (e) => { let selectorContainer = document.getElementById("selectorContainer"); selectorContainer.style.left = e.target.value + "%"; setChangeRangeValue(e.target.value); if(props.class === 'green') setGreen(e.target.value) if(props.class === 'blue') setBlue(e.target.value) if(props.class === 'red') setRed(e.target.value) if(props.class === 'intensity') setIntensity(e.target.value); if(props.class === 'freq') { setFreq(e.target.value); } props.leftEyeData(green, blue, red,intensity,freq); };

Collectives™ on Stack Overflow

How can i pass multiple arguments with different components?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related