<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<title>Передача id в компонент в React | Трепачёв Дмитрий</title>
		
		<link rel="stylesheet" href="/css/fonts/list.css?v=8">
		<link rel="stylesheet" href="/css/styles.css?v=323">
		<link rel="stylesheet" href="/js/highlighter/highlighter.css?v=79">
		
		<script src="/js/highlighter/highlighter.js?v=118"></script>
		
		<script src="/js/location.js?v=3"></script>
		<script src="/js/locale.js?v=5"></script>
		<script src="/js/main.js?v=130"></script>
		
		<meta name="yandex-verification" content="00eb45b7559e5c68">
		<meta name="google-site-verification" content="Af0TM2OrwIEtjoQXxYz2-1C-21E1m7DB23_kWpE9sLg">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<meta name="description" content="В данном уроке мы научимся передавать id в компонент React.">
		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
	</head>
	<body id="top">
		<div class="wrapper">
			<header>
				<div class="top">
	<div class="left"><img data-module="coder" src="" alt=""></div>
	<div class="right">
		offline version 0.0.2	</div>
	<div class="center">
			<a href="http://mentor.code.mu">
		Запись на курсы по HTML, CSS, JavaScript, PHP, фреймворкам и CMS,<br>
		<b>а также</b>: помощь в поиске работы и заказов, стажировка
		на реальных проектах&rarr;
	</a>
	</div>
</div>								<nav data-module="mainmenu">
	<section class="main active">
		<span data-href="/ru/markup/" data-open="markup">Верстка</span>
		<span data-href="/ru/javascript/" data-open="javascript">JavaScript</span>
		<span data-href="/ru/php/" data-open="php">PHP</span>
		<span data-href="/ru/javascript/typescript/" data-open="typescript">TypeScript</span>
		<span data-href="/ru/javascript/nodejs/" data-open="nodejs">NodeJS</span>
		<span data-href="/ru/sql/" data-open="sql">SQL</span>
		<span data-href="/ru/javascript/framework/vue/" data-open="vue">Vue</span>
		<span data-href="/ru/javascript/framework/react/" data-open="react">React</span>
		<span data-href="/ru/javascript/lib/jquery/" data-open="jquery">jQuery</span>
		<span data-href="/ru/php/framework/laravel/" data-open="laravel">Laravel</span>
		<span data-href="/ru/tool/" data-open="tool">Tools</span>
		<span data-href="/ru/internet/" data-open="internet">Internet</span>
		<!--<span data-href="/ru/theory/" data-open="theory">Теория</span>-->
	</section>

	<section class="sub" data-name="markup">
		<a href="/ru/markup/book/prime/">Основной учебник</a>
		<a href="/ru/markup/book/supreme/">Высший учебник</a>
		<a href="/ru/markup/book/prep/less/">Учебник LESS</a>
		<a href="/ru/markup/book/prep/sass/">Учебник SASS</a>
		<a href="/ru/markup/manual/html/">Справочник HTML</a>
		<a href="/ru/markup/manual/css/">Справочник CSS</a>
	</section>

	<section class="sub" data-name="php">
		<a href="/ru/php/book/prime/">Основной учебник</a>
		<a href="/ru/php/book/supreme/">Высший учебник</a>
		<a href="/ru/php/book/oop/">Учебник ООП и MVC</a>
		<a href="/ru/php/book/parsing/">Учебник парсинга</a>
		<a href="/ru/php/tasker/stager/">Задачник по уровням</a>
		<a href="/ru/php/manual/">Справочник</a>
		<a href="/ru/php/video/lesson/">Видеоуроки</a>
	</section>

	<section class="sub" data-name="javascript">
		<a href="/ru/javascript/book/prime/">Основной учебник</a>
		<a href="/ru/javascript/book/practice/">Учебник практики</a>
		<a href="/ru/javascript/book/supreme/">Высший учебник</a>
		<a href="/ru/javascript/book/oop/">Учебник ООП</a>
		<a href="/ru/javascript/tasker/stager/">Задачник по уровням</a>
		<a href="/ru/javascript/manual/">Справочник</a>
		<a href="/ru/javascript/video/lesson/">Видеоуроки</a>
		<a href="/ru/javascript/mistake/">Ошибки</a>
		<a href="/ru/javascript/faq/">FAQ</a>
	</section>

	<section class="sub" data-name="nodejs">
		<a href="/ru/javascript/nodejs/book/prime/">Основной учебник</a>
		<a href="/ru/javascript/nodejs/book/express/">Express</a>
		<a href="/ru/javascript/nodejs/book/mongo/">Mongo</a>
		<a href="/ru/javascript/nodejs/book/hosting/">Хостинг</a>
	</section>
	<section class="sub" data-name="sql">
		<a href="/ru/sql/manual/">Справочник</a>
	</section>

	<section class="sub" data-name="typescript">
		<a href="/ru/javascript/typescript/book/prime/">Основной учебник</a>
	</section>

	<section class="sub" data-name="vue">
		<a href="/ru/javascript/framework/vue/book/prime/">Основной учебник</a>
	</section>

	<section class="sub" data-name="react">
		<a href="/ru/javascript/framework/react/book/prime/">Основной учебник</a>
	</section>
	
	<section class="sub" data-name="jquery">
		<a href="/ru/javascript/lib/jquery/book/prime/">Основной учебник</a>
		<a href="/ru/javascript/lib/jquery/manual/">Справочник</a>
	</section>

	<section class="sub" data-name="laravel">
		<a href="/ru/php/framework/laravel/book/prime/">Основной учебник</a>
	</section>
	
	<section class="sub" data-name="tool">
		<a href="/ru/tool/terminal/">Командная строка</a>
		<a href="/ru/tool/webpack/">Сборщик Webpack</a>
		<a href="/ru/tool/gulp/">Сборщик Gulp</a>
	</section>
	
	<section class="sub" data-name="internet">
		<a href="/ru/internet/protocol/http/">Протокол HTTP</a>
	</section>
	<!--
	<section class="sub" data-name="wordpress">
		<a href="http://dep.code.mu/ru/cms/wordpress/book/prime/administration/">Учебник администратора</a>
		<a href="http://dep.code.mu/ru/cms/wordpress/book/prime/development/">Учебник разработчика</a>
		<!--
		<a href="/ru/cms/wordpress/book/prime/administration/">Учебник администратора</a>
		<a href="/ru/cms/wordpress/book/prime/development/">Учебник разработчика</a>
		
	</section>
	-->
</nav>							</header>
			<main>
				<h1>Передача id в компонент в React</h1>
				<div class="content">
<p>
	Вы уже знаете, что атрибуты тега компонента
	попадают в пропсы. Это касается всех атрибутов,
	кроме атрибута <code class="code inline">key</code>, который нужен
	для использования в циклах, вот так:
</p>
<div class="block">
	<code class="highlight" data-module="highlight" data-lang="jsx">const items = prods.map(prod =&gt; {
	return &lt;Product
		key ={prod.id}
		name={prod.name}
		cost={prod.cost}
	/&gt;;
});</code>
</div>
<p>
	В данном случае в пропсы попадут атрибуты
	<code class="code inline">name</code> и <code class="code inline">cost</code>, а <code class="code inline">key</code> -
	не попадет. Нам, однако, может понадобится
	передать <code class="code inline">id</code> в пропсы компонента. В
	этом случае нам нужно будет ввести еще один
	атрибут:
</p>
<div class="block">
	<code class="highlight" data-module="highlight" data-lang="jsx">const items = prods.map(prod =&gt; {
	return &lt;Product
		key ={prod.id}
		id  ={prod.id}
		name={prod.name}
		cost={prod.cost}
	/&gt;;
});</code>
</div>
<div class="task">
	<p>
		Модифицируйте ваш компонент <code class="code inline">User</code> так,
		чтобы в нем в абзаце выводился <code class="code inline">id</code> юзера.
	</p>
</div>
</div>			</main>
			<div class="bottom">
	<section class="pages" data-url="/ru/javascript/framework/react/book/prime/" data-persent="87" data-hash="jsrtPmCpPI" data-quantity="98" data-num="86"><a href="/ru/javascript/framework/react/book/prime/components/passing-states/" class="prev"><span class="arrow">&larr;</span></a><a href="/ru/javascript/framework/react/book/prime/components/changing-parent-state/" class="next"><span class="arrow">&rarr;</span></a></section></div>			<footer>
	<div class="contacts">
	Трепачёв Дмитрий &copy; 2012-2023 <br>
	<a href="https://t.me/trepachev_dmitry">t.me/trepachev_dmitry</a>
</div>		
</footer>			<div class="jump">
	<a href="#top" class="to-top">&uarr;</a>
</div>			<div class="langer">
	</div>			</div>
		</div>
		
		<script src="/js/metrika.js?v=1"></script>	</body>
</html>