2.1 - Concept Data

In this part we're going to create our object for our data. We're going to make an array of objects, similar to something that we might get as a response from an API. This is similar to what we did with the little creature list app earlier. We're going to create our own data and keep it in this file. In the near future we will be using data from multiple different APIs.

Create the data

Go to the file called concepts.js. Note that the lower case is correct, as we are not creating a React component in this file. Type out the following code in this file:

export const concepts = [
    {
        text: 'Functional Components',
        done: false
    },
    {
        text: 'Fat Arrow',
        done: false
    },
    {
        text: 'JSX',
        done: false
    },
    {
        text: 'Class Component',
        done: false
    },
    {
        text: 'Props',
        done: false
    },
    {
        text: 'Constructors',
        done: false
    },
    {
        text: 'setState',
        done: false
    },
    {
        text: 'State',
        done: false
    },
    {
        text: 'Lifecycle Methods',
        done: false
    }
]

//For a Future Challenge
export const lifecycleMethods = [
    {
        text: 'componentDidMount',
        done: false
    },
    {
        text: 'componentDidUpdate',
        done: false
    }, 
     {
        text: 'componentWillUnmount',
        done: false
    },
     {
        text: 'render',
        done: false
    }

]

The const concepts is what we'll be using for the core of this app, and the lifecycleMethods is for the challenge at the end! Go ahead and add everything to your file for now.

Next, we're going to start forming the list of our concepts.

Concept List