useState Hook Does Not Run in Body of Dialog Component

[frastlin]

Hello,
I have a form on my dialog and I'm using the useState hook:

const [ email, setEmail ] = useState(props.email)

but when I console.log(email) after this, I get undefined. If I run the component outside the dialog, then it works just fine.

[tomivirkki]

Hi,
The following works fine for me (foobar@vaadin.com is logged to the console):

<Dialog opened>
  <Form email="foobar@vaadin.com"></Form>
</Dialog>

Form.js

import * as React from 'react';

export default (props) => {

  const [ email, setEmail ] = React.useState(props.email);

  console.log(email);

  return <div>
    <input />
    <input />
  </div>
}

[frastlin]

Hello, sorry, I guess it has something to do with the component not updating if the prop that is passed in is null first, then is changed to a value later. I fixed the problem by having the dialog not render if the field it needed was empty.