Directly modify parent props from the child in react

Question

In a wizard in step 1, can I directly modify a parent prop, so after mounting step 2, it will have the that prop modified prop available? Or how should I do it?

Wizard component, render

<Wizard>
  {this.state.step1 &&
    <Step1 dataWizard={this.state.dataWizard} />
  }
  {this.state.step2 &&
    <Step2 dataWizard={this.state.dataWizard} />
  }
</Wizard>

Step1 component

class Step1 extends React.Component {

  ...

  updateData() {
    this.props.dataWizard.idCreation = 432876;
  }

Answer 1

You should use the state, because

Props are Read-Only

You should use a state in the component which renders Wizard, and when Step1 is finished, it alters that state, which then will be used in Step2.

This is called Lifting State Up.

Answer 2

props, like state, is read-only and should never be mutated.

You should use a callback:

<Step1 
  dataWizzard={this.state.dataWizzard} 
  updateData={idCreation => 
    this.setState(prevState => ({ 
      dataWizzard: {
        ...prevState.dataWizzard,
        idCreation,
      },
    }))
  } 
/>

Then you call the callback in Step1:

updateData() {
  this.props.updateData(432876);
}