> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-8-apps/2.0-concept-list/2.3-concept-component.md).

# 2.3 - Concept Component

Okay, now that we've got our two functional children classes, `ConceptList` and `Concept`, we can go ahead and work on the logic in our `ReactConceptsApp` component.

## imports

First thing we can do is add our new `ConceptList` component to our imports. All the imports together should now look like this:

```javascript
import React, { Component } from 'react';
import _ from 'lodash';
import ConceptList from './ConceptList';
import { concepts } from './concepts';
```

## render()

Additionally, now that we've set up our child components, we can now update our render to use these components. We need to use our `ConceptList` component, and set its props of concepts and toggle. So we can pass along our state to concepts, and we need to create a method to pass to `toggle`. Let's go ahead and just call it `toggleConcept` and set up our `render()` to look like this.

```javascript
    render() {
        return (
            <div className="main">
                <div className="mainDiv">
                    <h1>Concept List App</h1>
                    <p>Use the list below to toggle concepts that you do or do not understand. Note that this will update when you refresh the page.</p>
                    <h2>General Concepts</h2>
                    <ConceptList concepts={this.state.concepts} toggle={this.toggleConcept.bind(this)} />
                </div>
            </div>
        );
    }
```

## toggleConcept

Now, we're calling a custom function called `toggleConcept`, but we need to actually define what `toggleConcept` does. Our objective is to take the concepts and compare them against the concept list, using the lodash `find` method.

This `find` method compares a collection to a second thing (in this case `concepts`) and returns the first thing it finds truthy for. Then, we need it to set concept.done to the opposite of what it currently is, essentially toggling it. Yea, `lodash` is sweet.

Finally, we need to set state back to include the updated toggle on `done`. To see for yourself, what concepts looks like when it comes back, feel free to add a `console.log` at the first line of the method.

```javascript
    toggleConcept(concepts) {
        let concept = _.find(this.state.concepts, concepts);
        concept.done = !concept.done;
        this.setState({concepts: this.state.concepts});
    }
```

## The View:

Here's what you should currently see in the app:

![Concept List](https://373648234-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8Yfynp7GOpkPwiVi%2F-LAU8eP0dkHqpw4aRlea%2F-LAU8sE8XQ5XyVnznKkr%2F8.2.3_concept-list.PNG?generation=1524162334226250\&alt=media)

## Completed Code

To see the complete code for ReactConceptsApp so far, check below to make sure yours matches up.

```javascript
import React, { Component } from 'react';
import _ from 'lodash';
import ConceptList from './ConceptList';
import { concepts } from './concepts';

export default class ReactConceptsApp extends Component {
    constructor() {
        super(); 
        this.state = { concepts: concepts };
    }

    toggleConcept(concepts) {
        let concept = _.find(this.state.concepts, concepts);
        concept.done = !concept.done;
        this.setState({concepts: this.state.concepts});
    }

    render() {
        return (
            <div className="main">
                <div className="mainDiv">
                    <h1>Concept List App</h1>
                    <p>Use the list below to toggle concepts that you do or do not understand. Note that this will update when you refresh the page.</p>
                    <h2>General Concepts</h2>
                    <ConceptList concepts={this.state.concepts} toggle={this.toggleConcept.bind(this)} />
                </div>
            </div>
        );
    }
}
```

Next, we're going to figure out how to add a new concept.

[Creating a new Concept!](/javascript-301-reactfundamentals/part-8-apps/2.0-concept-list/2.4-concept-list-component.md)