CODEWITHSUNDEEP
javascriptreactjs
Apurv Singla
Apurv Singla

Reputation: 39

How can i pass multiple arguments with different components?

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);
  };

Upvotes: 0

Views: 493

Answers (1)

alaric
alaric

Reputation: 169

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;

Upvotes: 1

Related Questions