---
id: 67ec2f7924ade2450c06bcd8
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---

# --description--

In previous lessons, you learned about handling side effects, like data fetching, with the `useEffect` Hook. In this workshop, you'll build an application that fetches fruit data from an API based on user input and displays the results dynamically.

First, make your `FruitsSearch` component return a `div` element with an `id` of `search-container`.

# --hints--

You should have a `div` element.

```js
assert.lengthOf(document.querySelectorAll("div"), 2);
```

Your `div` element should have an `id` called `search-container`.

```js
const el = document.getElementById("search-container");
assert.exists(el);
assert.strictEqual(el.tagName, "DIV");
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Fruits Search</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/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 { FruitsSearch } from './index.jsx';
    ReactDOM.createRoot(document.getElementById('root')).render(<FruitsSearch />);
  </script>
</body>
</html>
```

```css
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

#search-container {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#search-input {
  padding: 10px;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

#results {
  text-align: left;
  max-height: 150px;
  overflow-y: auto;
}
.result-item {
  padding: 5px;
  border-bottom: 1px solid #ddd;
}
```

```jsx
const { useState, useEffect } = React;

--fcc-editable-region--
export function FruitsSearch() {
  
}
--fcc-editable-region--
```
