---
id: 680900675ae3d54ee19590c3
title: Step 2
challengeType: 0
dashedName: step-2
---

# --description--

Before building out the form itself, you will create the state variables you need. They are `heroName`, `realName`, `powerSource`, and `powers`.

For now, create the variables and setters for `heroName` and `realName`. Both should have an initial value of empty strings.

# --hints--

You should use the array destructuring syntax to set a `heroName` state variable and a `setHeroName` setter.

```js
assert.match(code, /(const|let|var)\s+\[\s*heroName\s*,\s*setHeroName\s*\]/);
```

Your `heroName` and `setHeroName` should use the `useState` hook.

```js
  const abuseState = __helpers.spyOn(React, "useState");
  const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src ===  "index.jsx").innerText;
  const exports = {};
  const _a = eval(script);
  const _b = await __helpers.prepTestComponent(exports.SuperheroForm);

  assert.isAtLeast(abuseState.calls.length, 1);
```

Your `useState` hook for `heroName` should have an initial value of empty string.

```js
  const abuseState = __helpers.spyOn(React, "useState");
  const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src ===  "index.jsx").innerText;
  const exports = {};
  const _a = eval(script);
  const _b = await __helpers.prepTestComponent(exports.SuperheroForm);
  
  assert.equal(abuseState.calls[0]?.[0], "");
```

You should use the array destructuring syntax to set a `realName` state variable and a `setRealName` setter.

```js
assert.match(code, /(const|let|var)\s+\[\s*realName\s*,\s*setRealName\s*\]/);
```

Your `realName` and `setRealName` should use the `useState` hook.

```js
  const abuseState = __helpers.spyOn(React, "useState");
  const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src ===  "index.jsx").innerText;
  const exports = {};
  const _a = eval(script);
  const _b = await __helpers.prepTestComponent(exports.SuperheroForm);

  assert.isAtLeast(abuseState.calls.length, 2);
```

Your `useState` hook for `realName` should have an initial value of empty string.

```js
  const abuseState = __helpers.spyOn(React, "useState");
  const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src ===  "index.jsx").innerText;
  const exports = {};
  const _a = eval(script);
  const _b = await __helpers.prepTestComponent(exports.SuperheroForm);

  assert.equal(abuseState.calls[1]?.[0], "");
```

# --seed--

## --seed-contents--

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Superhero Application Form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { SuperheroForm } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<SuperheroForm />);
    </script>
  </body>
</html>
```

```css
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(30deg, #ff9999 50%, #6699ff 50%)
}

.form-wrap {
  background-color: white;
  width: 400px;
  padding: 20px;
  border: 1px solid black;
  box-shadow: 5px 5px 10px black;
}

.form-wrap h2,
.form-wrap p {
  text-align: center;
}

.form-wrap p {
  position: relative;
  top: -18px;
}

.section {
  display: flex;
  margin-bottom: 30px;
}

.column {
  flex-direction: column;
}

.submit-wrap {
  text-align: center;
}

.submit-btn {
  display: block;
  margin: 0 auto;
  padding: 0.4rem 0.5rem;
  border: 1px solid black
}

.submit-btn:hover {
  cursor: pointer;
  background-color: #f3f3f3;
}

.submit-btn:disabled {
  cursor: not-allowed;
}
```

```jsx
const { useState } = React;

export const SuperheroForm = () => {

  --fcc-editable-region--
  
  --fcc-editable-region--

  return (
    <div className='form-wrap'>
      <h2>Superhero Application Form</h2>
      <p>Please complete all fields</p>
    </div>
  )
};
```
