## Component Instantiation (R2R)
🔹 *parent* [[✧ The Road to React|The Road to React]]
▫️ *prev* [[Reuseable Components]], *next* [[❞ Imperative React|Imperative React]] *related* [[❜ Meet the React component|Meet the React component]]
### Component Instantiation
You can instatiate a single component and then uses it multiple instances.
```js
class Developer {...}
const robin = new Developer('Robin', 'Wieruch');
console.log(robin.getName());
//Robin Wieruch
```
As a App component definition
```js
function App() {
return (
<div>
<h1>My Hacker Stories</h1>
<Search />
<hr />
<List />
<List />
</div>
);
}
function List() {...}
```
How could it be possible to give each `List` component it's own `list` variable?
```js
function App() {
return (
<div>
<List item="firstList" />
<List item="secondList" />
</div>
);
}
function List(item) {
const constructor() {
this.list = item;
}
}
```
Or maybe like this?
```js
function List() {
return (
<ul>
{list.map(function (item) {
let listItem = item;
return (
<li key={listItem.objectID}>
<span>
<a href={listItem.url}>{item.title}</a>
</span>
<span>{listItem.author}</span>
<span>{listItem.num_comments}</span>
<span>{itemItem.points}</span>
</li>
);
})}
</ul>
);
}
```