React For Beginners #7 — Displaying State Data

This is part 7 of my React Learning series. Using knowledge gleaned from Wes Bos’ React for Beginners. Last time we explored:

• Setting up a State Object
• Building a form with refs that submits data we wanted to put into State
• Created a method in the App component that updated the State
• Passed the method down via Props to allow the submission function to use it.

So in the last post we put things into state. We probably want to display that somewhere so lets get the data from State to our Eyeballs.

This follows these basic steps.

1. Build a component which will be a template to display our data
2. Set up a loop to make multiple components for each entry in an object or array.
3. Add a unique key for each entry to ensure React can reference it correctly.
4. Use props to pass data from the state to the display component
5. Use the props in the display component to populate the render method.

The setup example

Let’s assume we have an object in our state which is called profiles and contains user profiles objects called user321 or someother unique id. We want to show all of them on a page.

Building the component with placeholder data

Displaying a bunch of profiles sounds like a job for multiple Divs but we should be smarter than just building them on the original page. We should build a component for the profiles each containing a div, makes it nice and reusable.

Let’s call it Profile.js. We can copy an existing component and make the class and export default 'Profile'

In the render method we can return a div for each profile, lets do that with just a placeholder inside:

<div classname="single-profile"> PROFILE GOES HERE </div>

Looping through our Profiles Object

Remember to Import the component. I forget that a lot.

Before we get into loops, Its a good idea to add a profile tag: <Profile/> and we should see our profile placeholder if all goes well.

Now we need to loop through our Profiles Object and render out each one, JSX does not have any native logic capability so we can use JS.

As it is an object we don’t get to use the Array helpers of ES6 normally but we can use Object.keys(this.state.profiles) which makes an array of the keys.

So we can do something like this: Object.keys(this.state.profiles).map(key => <Profile</>) which will return each profile key....almost there! But there is a little niggle...

Adding a unique key

However you will probably notice an error in the console…

Each child in an array or iterator should have a unique 'key' prop.

React wants each element to be uniquely identifiable, this helps it be very performant as it uses the key to find things quick. As our keys are unique, we can add a key property to each Profile tag like so <Profile key={key}/>

This need for unique names is something to be considered when constructing our objects.

Passing data from State to the Profile component

Now we have a component rendering for each object, we need that component to use information from the State. To do this we use…. yup, props. So that profile component now looks like this: <Profile key={key} details={this.state.profiles[key]}/>. The details tag is an abitary one, we can choose anything as long as we are consistant.

That will make each component have a prop called details where all the information from the object lives. From there we can populate the render method of the Profile component with whatever we would like. There are some gotchas though with JSX:

To use the img tag you lose the quotes: <img src={this.props.details.image}> Same goes for the alt property.

Otherwise its just a case of populating the template with the props. A pro tip is to create a variable or two as this.props.details.xxxx is quite long thing to type each time!

const image = this.props.details.image; const name = this.props.details.name;

Or we can be extra smart and use destructuring:

const { image, name } = this.props.details;

Conclusion

The process for placing state content into a component that renders it is pretty much all about props, however we need to make sure when we loop through items we do it in a way that allows React to see it as unique. Nothing too taxing, but obviously there is a lot of different scenarios this could apply to. But here is what we did:

1. Build the component
2. In the containing component, map through the Object.Keys if its an object to make multiple components
3. Give each component a unique key.
4. Pass in State data via props
5. Populate the component’s render method with whatever data you want to give it.

Now that we have gone through one way of adding and retrieving from state, in my next post we can look at another way of doing so. The State is our friend, don’t be like Will Smith.

…There are very few puns I can use for state…