## React JSX (R2R)
🔹 *parent* [[❞ React Fundamentals (R2R)|React Fundamentals (R2R)]]
🔸 *prev* [[❜ Meet the React component|Meet the React component]] *next* [[❜ Lists in React|Lists in React]] | [[❜ Extracting Components|Extracting Components]]
### React JSX
Everything in the curly braces can be used as JS. That means that functions can be included within JSX.
```js
function getTitle(title) {
return title;
}
function App() {
return (
<div>
<h1> Hello {getTitle('React')}</h1>
<label htmlFor"search">Search: </label>
<input id="search" type="text" />
</div>
);
}
```
I can loop over an array within the component by using `map()`
```js
let reactArray = [1,2,3,4,5];
function getTitle(array) {
const myMap = array.map((i) => array[i] );
return `the current number is ${myMap}`;
}
function App() {
return (
<div>
<h1>Hello {getTitle(reactArray)}</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" />
</div>
);
} // Hello the current number is 2,3,4,5,
```
```js
const list = [
{
title: 'React',
url: 'https://reactjs.org/',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
},
{
title: 'Redux',
url: 'https://redux.js.org/',
author: 'Dan Abramov, Andrew Clark',
num_comments: 2,
points: 5,
objectID: 1,
},
];
function App() {
return (
<div>
...
<hr />
<ul>
{list.map(function (item) {
return <li>{item.title}</li>;
})}
</ul>
</div>
);
}
```
Because the list is within the function, it will iterate multiple times. It creates a `<ul>` with items mapped out.
![[Pasted image 20220113005612.png]]
This can be used to create a key with a stable identifier, so that the index isn't declared but will show up in the JSX.
```js
function App() {
return (
<div>
...
<hr />
<ul>
{list.map(function (item) {
return <li key={item.objectID}>{item.title}</li>;
})}
</ul>
</div>
);
}
```
This reminds me quite a bit of the Nunucks/Django templating language, only it's iterating over with HTML.