Search⌘ K
Home
Courses
Understanding Redux: A Beginner's Guide To State Management

Bringing Everything Together: Buttons

Explore how to implement the ButtonGroup component in React using Redux for state management. Learn to render multiple buttons from an array, use key props to avoid rendering errors, and understand the use of data attributes for future functionality.

We'll cover the following...

In the previous lesson, we looked at the implementation for App.js

Javascript (babel-node)
import React, { Component } from "react";
import HelloWorld from "./HelloWorld";
import ButtonGroup from "./ButtonGroup";
import { store } from "./store";
class App extends Component {
  render() {
    return [
      <HelloWorld key={1} tech={store.getState().tech} />,
      <ButtonGroup key={2} technologies={["React", "Elm", "React-redux"]} />
    ]; 
  }
}
export default App;

We shall now discuss the ButtonGroup component.

The ButtonGroup component takes in an array of technologies and spits out buttons. It handles the rendering of the three buttons below ...