Button not executing both functions when passing state and props

Question

I'm new to react and have encountered an issue which I haven't found any solution to for a while now.

The NEXT button is a child component of Form1 and is declared in App.js. The parameters of Form1 file is (props, {transform, fram}). The intention with props is to declare {props.children} in Form1 so that it allows the Next button to be shown by being implemented in App.js.

When implemented in this manner, the next button only seem to execute 1 function rather than 2 - handleNext() but not fram(). Fram() sets translateX value to form1. handleNext controls the state of CustomizedSteppers.

However, if the "props" is deleted from Form1, and the button is moved out of the tags and put for example above CustomizedSteppers tag, it executes both functions. I want the button to be implemented in the manner that is shown below but it does not work as intended My App.js:

import {Form1, Form2, Form3, Form4} from './components';
import {Header} from './containers';
import {Section} from './containers';
import {Forms} from './containers'
import CustomizedSteppers from './components/stepper/demo';
const App = () => {
  
  const [activeStep, setActiveStep] = React.useState(0);
      const handleNext = () => {
          setActiveStep((activeStep+1));
        };

  const [transform, transformit] = React.useState("TranslateX(0px)");
  
  const fram = () => {  
    transformit("TranslateX(-900px)");
  };
  return (
    <>  
      <Header />
        <Section class="section">
        
          <CustomizedSteppers activeStep={activeStep} handleNext={handleNext}/>
          <Forms>
            
            <Form1 transform={transform} fram={fram}>
              <button id="B "onClick={() => {handleNext();fram();}}>NEXT</button>  
            </Form1>
            <Form2 />
            <Form3 />
            <Form4 />
          </Forms>
        </Section>
        
    </>
  );
}
export default App;

My Form1.js:

export default function Form1(props, {transform, fram}){

  return (
    <div id='Form1' style={{transform: transform}}>
              <p id="demo"></p>
              <div class="btn-box-f1">
                {props.children}
              </div>
          </div>   
  )
}

Answer 1

Instead of trying to call two functions, call the function that updates the state first, and then use useEffect to monitor that state change.

The useEffect:

useEffect(() => {
  transformit('TranslateX(-900px)');
}, [activeStep]);

And the updated button:

<button id="B" onClick={handleNext}>NEXT</button>

Oh, and there's no need to have double parentheses in your setActiveStep function:

setActiveStep(activeStep + 1);

Answer 2

As far as I can tell, the issue is with the way you've declared the Form1 component's props. React components take only a single argument, the props object. function Form1(props, { transform, fram }) is invalid, the transform prop isn't accessible in the component, it's undefined.

Here's the working version:

function Form1({ children, transform }) {
  return (
    <div id="Form1" style={{ transform: transform }}>
      <p id="demo"></p>
      <div className="btn-box-f1">{children}</div>
    </div>
  );
}

I've dropped logs in both callbacks and correctly see both triggered and see the transform applied to the id="Form1" div element.

Here the "next" button was clicked, both callbacks logged, the active step state updated to 1, and the transform was applied.