React props and components

— 7 minute read

Yesterday we build our first React app and while it's still fresh, lets dive deeper into Components and Props.

To recap, React is build as a Component based language, a lot of components make up a React app.

And Props are how we can make Components dynamic. Props cannot be changed however.

Creating a data set in React permalink

Let's start building on our basic React app we created yesterday.

We will make multiple components in the main App.js file. In a best practice world I would suggest moving components out into their own files, but for now it's visually better to work like this, until we get the hang off components.

Let's start by adding a data source to our file, in this case a array of people.

We can add this array under our import statements.

const people = [
{
firstName: 'Chris',
lastName: 'Bongers'
},
{
firstName: 'Hub',
lastName: 'Bongers'
},
{
firstName: 'Sanne',
lastName: 'Bongers'
}
];

Nothing fancy, just 3 people from my household.

What we want to achieve here is to show this data in a table and add our own cool component to render some kind of avatar for each person.

Writing our first component in React permalink

Now let's change our App function to the following:

function App() {
return (
<Table data={people} />
);
}

Way simpler then the code we had previous, but this won't do anything and give errors.

React doesn't know what a Table element is... So let's create our first component: Table.

You can see we pass our people json object into this Component and call it data this is the Prop.

Above this function we will add the following snippet:

const Table = ({ data }) => (
<table className={'table'} cellSpacing={0} cellPadding={0}>
<tbody>
{data.map((row, i) => {
return <TableRow row={row} key={i} />
})}
</tbody>
</table>
)

As you can see we use ES6 arrow functions which is just a quicker way of writing a complete function.

This component is nothing fancy, but returns a html table element.

Then it maps each row inside our data object (which we passed in our basic App component).

We then say for each row in our data object return a component called TableRow and give it the props row and key.

  • Note that key is not a prop we are passing through, but each unique list item or row item in React must have a unique identifier.

For our TableRow component we use the following snippet:

const TableRow = ({ row }) => (
<tr>
<td><Avatar person={row} /></td>
<td>{row.firstName}</td>
<td>{row.lastName}</td>
</tr>
)

Again, you would say nothing fancy, it accepts row as a prop and returns a html <tr> with the rows firstName and lastName.

Then you see we added another Component called Avatar and we give it a prop called person which is our current row.

So let's look at how this Avatar component looks like

const Avatar = ({ person }) => {
const { firstName, lastName } = person;
let name = firstName.charAt(0).toUpperCase() + lastName.charAt(0).toUpperCase();

return (
<div className={'avatar'}>
{name}
</div>
)
}

The Avatar component I set up slightly different to show you what options we have in React.

As you can see we deconstruct a new const firstName and lastName from the person object.

This is the same we did in the TableRow component as row.firstName.

Then we define a new variable called name, we get the first character off our firstName and convert it to uppercase. Then we do the same for the lastName.

We then return a div with a class avatar and pass the newly created variable name to it.

This will render a div with CB for our first contact Chris Bongers.

You can see a demo here:

Feel free to download this part from GitHub.

Thank you for reading, and let's connect! permalink

Let me know what React topics you would like to see in more depth and feel free to subscribe to my email newsletter and connect on Facebook or Twitter.