Question: 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?

Answer: 
All three of these files contain errors, especially the html file. So I'm just going to give you the right way to set it up.

```js
  myForm = new FormGroup({
    odr: new FormControl('', Validators.required),
  });

```

```html
<form [formGroup]="myForm">
  <div>
    <label for="odr" [ngClass]="{ invalid: myForm.get('odr')?.invalid }">
      Our Dear Relative:
    </label>
  </div>
  <mat-radio-group id="odr" formControlName="odr">
    <mat-radio-button value="Sally">Sally</mat-radio-button>
    <mat-radio-button value="Sue">Sue</mat-radio-button>
  </mat-radio-group>
</form>

```

```css
.invalid {
  color: red;
}

```

(no quotes around `red`)
I think, you should try to add Validator `required`, when you are creating the form, and additionally trigger `updateValueAndValidity`, in that case all validators will be executed and your label will be red

```
 myForm = new FormGroup({
    odr: new FormControl('', [Validators.required]),
 });

 myForm.updateValueAndValidity();

```