# React forms
We're going to build a simplified food delivery menu page. It'll have a list of dishes plus a form to filter them. The final result should look something like this:
Don't worry, we'll work our way there step by step.
### Part 1: Project setup
1. Download starter files and `cd` in
2. Run `npm install`
3. Run `npm run dev` to start the dev server
Since React uses non-standard syntax (JSX) it requires some processing before it can run in the browser. We'll use [Vite](https://vitejs.dev/) for this. Vite also provides a nice dev server that will auto-reload when you change files.
Open `workshop/index.jsx` in your editor. This is where we render our React app to the DOM. You can see that we have a top-level component named `App`. Open `App.jsx` to see what's currently being rendered.
### Part 2: Render a list
JSX supports multiple child elements like this:
```jsx
function App() {
return (
Apple
Orange
Banana
);
}
```
This is the same as listing those child elements in an array, like this:
```jsx
function App() {
return
{[
Apple
,
Orange
,
Banana
]}
;
}
```
This isn't very ergonomic to write by hand, but it comes in handy when you need to render a dynamic list. We can generate an array from some data and render it:
```jsx
function App() {
const fruits = ["Apple", "Orange", "Banana"];
const fruitList = fruits.map((fruit) =>
{fruit}
);
return
{fruitList}
;
}
```
It's common to inline the `.map()` (although using a separate named variable is fine if you find it clearer):
```jsx
function App() {
const fruits = ["Apple", "Orange", "Banana"];
return (
{fruits.map((fruit) => (
{fruit}
))}
);
}
```
We're passing a special prop called `key` to the top-level element in our array. This allows React to keep track of where each element is so it doesn't mess up the order. `key` should be unique and not change when the array order does. React will warn you if you forget this.
#### Task
Uncomment the line importing `"../data.js"`. This is an array of objects, each representing a dish in our restaurant. Use `.map` to render all of them to the page inside the `ul`.
Take a look at what data you have available for each dish and try to render it all. You should end up with something like this:
### Part 3: Create price inputs
We want to be able to filter the list of dishes by minimum and maximum price. To do this we'll need to create two [range inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range).
It can be a good idea to group and label related elements using the [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) element.
```jsx
```
Range inputs support constraining their values with the min/max/step attributes.
If we want these inputs to filter the list of dishes we'll need some state they can both use. For example we can create a state value called `min` that we update whenever the range input changes. Later we will be able to use the same `min` value to filter the dishes. By sharing the state value they'll always be in-sync.
```jsx
function App() {
const [min, setMin] = React.useState(0);
return (
// ...