React Native / React - refactoring prop before render()

Question

I have passed a guest object from one view to the next as a property. guest is made up of various properties guest.name, guest.age, guest.email, etc.

At the beginning of the class definition for the view that will be receiving the guest object I'd like to refactor from this.props.guest.name to guest.name so I've setup as follows:

class EditGuest extends Component {
  const { guest } = this.props;
  state = {
    name: guest.name,
    email: guest.email,
    age: guest.age
  };

  render() {
    ...
    ...
    ...
    ...
}

export default EditGuest;

However I am receiving an error parsing error: unexpected token, expected '(' for the line where I refactor const { guest } = this.props. If I define the guest object within the render function it works fine, but doesn't work when defined outside of it.

What's going on here?

Answer 1

You should write that in a constructor. Something similar to below

class EditGuest extends Component {
  constructor(props) {
   super(props);
   const { guest } = props;
   this.state = {
     name: guest.name,
     email: guest.email,
     age: guest.age
   };
  }

  render() {
    ...
    ...
    ...
    ...
  }
}
export default EditGuest;