---
title: Handling Data with Props in React
---
## Handling Data with Props in React
Props provide a way for passing and accessing data in React components.
Data is passed to React components as an attribute in JSX.
```javascript
{props.someAttribute}
}; ``` Now let’s walk through an example in CodePen. ### Getting Started If you haven't already, go ahead and sign up for a [free CodePen account](https://codepen.io/accounts/signup/user/free). Create a new pen by selecting 'Create' > 'New Pen' next to your CodePen profile picture. Next we'll add the appropriate libraries to render our React components. Open your JavaScript settings pane by selecting 'Settings' > 'JavaScript'. Select 'Babel' under 'JavaScript Preprocessor'. Next let's add our React libraries. Under 'External JavaScript' select the 'Quick-add' drop-down and add both the 'React' and 'React DOM' libraries. ### Using Props First lets define some dummy data in our JavaScript file. ```javascript const blogData = { title: 'My blog title', body: 'Arcu viverra dolor eros interdum, quis nonummy accusantium at lorem luctus iaculis.' }; ``` Next let’s define our blog components. ```javascript const Heading = () => { return ({props.body}
{body}