curriculum/challenges/english/blocks/workshop-fruit-search-app/67ec2f7924ade2450c06bcd8.md
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.
You should have a div element.
assert.lengthOf(document.querySelectorAll("div"), 2);
Your div element should have an id called search-container.
const el = document.getElementById("search-container");
assert.exists(el);
assert.strictEqual(el.tagName, "DIV");
<!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>
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;
}
const { useState, useEffect } = React;
--fcc-editable-region--
export function FruitsSearch() {
}
--fcc-editable-region--