pass both props and a state object and let child component move parent component-CodePudding

The button is a child component of Form1. My Form1:

export default function Form1(props, {transform}){
  return (
    <div id='Form1' style={{transform: transform}}>
              
             //Lots of html code..

              {props.children}
    </div>   
  )
}

In my App.js i have the following:

const [activeStep, setActiveStep] = React.useState(0);
      function handleNext(){
          setActiveStep(activeStep 1);
        };

  const [transform, transformit] = React.useState("TranslateX(0px)");
  
  function fram() {  
    transformit("TranslateX(-740px)");
  };
 <Form1 transform={transform}>
               
   <Button onClick={() => {handleNext();fram();}}>NEXT</Button> 
                
 </Form1>

The problem is that i'm passing both props and {transform} into Form1 which in turn does not allow the {transform} object to manipulate style of Form1.

I have been stuck here for a while now, Is there any way possible to pass both into form1?

CodePudding user response：

export default function Form1({transform,...props}){
  return (
    <div id='Form1' style={{transform: transform}}>
              
             //Lots of html code..

              {props.children}
    </div>   
  )
}

change the arguments like this it should be fine

CodePudding user response：

If you change Form1 to

function Form1(props){
    return (
       <div id='Form1' style={{transform: props.transform}}>    
            {props.children}
        </div> 
}

This works for me. transform and children are both present in props.