Getting Started with React and Redux: Lesson 5 of 10

Displaying Our Characters

Up Next

Dispatching on Click

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

Sign Up Now

Login to your account

We need to display our characters on screen. Let's create a new component that we will connect to our store to pull the characters out. Create a file at src/components/CharacterList.js. Put the following in it.

import React from 'react';
import { connect } from 'react-redux';

const CharacterList = ({ characters }) =>
  <div id='character-list' className='col-md-6'>
    <h1>Characters</h1>
    <ul>
      {characters.map(c =>
        <li
          key={c.name}
        >
          {c.name}
        </li>
      )}
    </ul>
  </div>;

const mapStateToProps = ({ characters }) => ({
  characters,
});

export default connect(mapStateToProps)(CharacterList);

We import React and the connect function from react-redux. This function will allow us to designate what we want to pull out of state and then specify the component we want to pass those pieces of state to as props. Since we don't need any of the lifecycle methods, we define our component as a stateless function. Since props are passed as the first parameter to a stateless functional component, we destructure it to pull the characters out of it. Our characters list is just a simple unordered list.

We create a function called mapStateToProps. This will be the first argument we pass to our connect function. The current state will be passed to this function. Our job is to define what we want to be sent into our component by returning an object with this data on it. In our function, we destructure the state to pull the characters out of it and then return an object that has these characters on it. This will ensure our characters are passed as props to our component as characters.

Last thing we need to do is export our component, but we wrap it in a new component created by connect. We invoke connect twice. The first time, we pass it our mapStateToProps. This returns a function that we then invoke again and pass it our component. Underneath the hood, it creates a parent component that manages the subscriptions to the store and passes the correct pieces of state down to our view component.

Now that we have our component, the only thing we need to do now is display it in our main app component. Make your src/components/App.js look like below.

import React from 'react';
import CharacterList from './CharacterList';

const App = () =>
  <div className='container'>
    <div className='row'>
      <CharacterList />
    </div>
  </div>;

export default App;

Here we are bringing in our new component and displaying it on the page. Refresh the page, and you will be able to see our characters!

Now that we are displaying our characters, let's find out how to interact with them. In the next one, we will add click listeners to our character list that will dispatch an action.

Chris Sevilleja

151 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.