# 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](/files/-LAU8sE8XQ5XyVnznKkr)

## 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-8-apps/2.0-concept-list/2.3-concept-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.