# I have an issue with my data not showing in React App

**URL:** <https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771>\
**Category:** General\
**Created:** [March 4, 2020, 3:07pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771 "2020-03-04T15:07:51Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://forum.freecodecamp.org/u/john1)\
**Post date:** [March 4, 2020, 3:07pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/1 "2020-03-04T15:07:51Z")

</div>

Hi folks,

It’s been a while since I last asked for help and I am really stuck on something here.

Basically I have a react app, that calls for data and maps over the data. Then I have a dropdown that gives the user values but when they click the dropdown and on componentDidMount there is not data from the .map

Here is a code sandbox:

> **[intelligent-benz-l7kyq - CodeSandbox](https://codesandbox.io/s/intelligent-benz-l7kyq?fontsize=14&hidenavigation=1&theme=dark)**
>
> intelligent-benz-l7kyq using react, react-dom, react-scripts

Here is my code:

```auto
import React, { Component } from 'react'

export class Results extends Component {

    constructor(){
        super()

        this.state = {
            data: []
        }

        this.handleChangeCourse = this.handleChangeCourse.bind(this);
    }

    componentDidMount(){
        const data = require("../fakeOpps.json");
        this.setState({ data: data });

        console.log("data comp did mount below:");
        console.log(data);
    }

    handleChangeCourse = event => {
        this.setState({ Opportunity: event.target.value });
    };

    //Get the data for opportunies
    getUnique(arr, comp) {
        const unique = arr
            //store the comparison values in array
            .map(e => e[comp])

            // store the keys of the unique objects
            .map((e, i, final) => final.indexOf(e) === i && i)

            // eliminate the dead keys & store unique objects
            .filter(e => arr[e])

            .map(e => arr[e]);

        return unique;
    }

    render() {     

        const Opportunity = this.getUnique(this.state.data, "Opportunity");
        console.log(" opp below:");
        console.log(Opportunity);

        const data = this.state.data;
        
        const filterDropdown = data.filter(function (result) {
            return result.Opportunity === data;
        });
        
        console.log('fil');
        console.log(filterDropdown);

        

        return (
            <div>

                <label>
                    Looping through Courses tag from Json File
            <select
                        value={this.state.data}
                        onChange={this.handleChangeCourse}
                    >
                        {Opportunity.map(data => (
                            <option key={data.Id} value={data.Opportunity}>
                                {data.Opportunity}
                            </option>
                            ))}
                    </select>
                </label>

                <div>
                            <h1>Looped Data Here</h1>
                    {filterDropdown.map(data => (
                        <div key={data.Id} style={{ margin: "10px" }}>
                            {data.Opportunity}
                            <br />
                        </div>
                    ))}
                </div>
                     

                
            </div>
        )
    }
}

export default Results

```

Where am I going wrong here?! I’m so lost - cheers 🙂

John.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [March 4, 2020, 3:53pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/2 "2020-03-04T15:53:17Z")

</div>

Can you explain exactly what it is you are trying to do?

`filterDropdown` is an empty array, so there is nothing to map over. What is it you expect it to be?

I’m also not sure what `getUnique` is supposed to do? If you do a `JSON.stringify` compare in the render function of `data` and `Opportunity` you can see they are the same.

```auto
const Opportunity = this.getUnique(this.state.data, "Opportunity");
const data = this.state.data;
console.log(JSON.stringify(data) === JSON.stringify(Opportunity))
// true

```

---

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://forum.freecodecamp.org/u/john1)\
**Post date:** [March 4, 2020, 3:59pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/3 "2020-03-04T15:59:06Z")

</div>

> [@lasjorg](#):
>
> ```auto
> 
> ```

So when someone clicks on the dropdown they should see all of the opportunities.

FilterDropDown should just show one of each option in the dropdown.

Then when a user selects a value from the dropdown it would then render after the h1 called looped data here.

At the moment there is no data being displayed under that H1 tag.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [March 4, 2020, 4:23pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/4 "2020-03-04T16:23:11Z")

</div>

1. Then what is `getUnique` doing if it is just a list of all the opportunities in the data?

2. The `FilterDropDown` is just used for mapping to a div, even if the filter did return the correct data you are not using it for a dropdown?

3. I don’t understand how you are going to use `filterDropdown` for both a filtered dropdown and as the list to output to after you have filtered the opportunities?

What I would suggest is first to isolate the filtering logic and testing it outside the React app. Get the [Quokka](https://quokkajs.com) extension for VS Code. Add the JSON as an object and try mapping and filtering the object to test and practice getting the data from it that you want.

---

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://forum.freecodecamp.org/u/john1)\
**Post date:** [March 4, 2020, 4:31pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/5 "2020-03-04T16:31:22Z")

</div>

> [@lasjorg](#):
>
> FilterDropDown

OK cool thanks for the help and extension. If it helps I was using this YT video as a guide:

[![](https://img.youtube.com/vi/UVbaLNnX2F0/maxresdefault.jpg "How to create Filter Feature as Dropdown in React | React Tutorial") ](https://www.youtube.com/watch?v=UVbaLNnX2F0)

Thank you!

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [March 4, 2020, 4:43pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/6 "2020-03-04T16:43:09Z")

</div>

I didn’t watch the video but the data used (looking at the github) is just an array of flat objects. You have arrays inside the objects that you need to deal with (Opportunity, Category, Eligibility).

Also, just as an aside. Remember that you can not compare objects (arrays/objects) directly.

```auto
const names = ['Jack', 'Tom', 'Jenny']
const names2 = ['Jack', 'Tom', 'Jenny']

console.log(names === names2);
// false

console.log(JSON.stringify(names) === JSON.stringify(names2));
// true

const user = {
  name: 'Jack',
  age: 32
}

const user2 = {
  name: 'Jack',
  age: 32
}

console.log(user === user2);
// false

console.log(JSON.stringify(user) === JSON.stringify(user2));
// true

```

---

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://forum.freecodecamp.org/u/john1)\
**Post date:** [March 4, 2020, 4:53pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/7 "2020-03-04T16:53:17Z")

</div>

> [@lasjorg](#):
>
> names2

Wicked that makes sense to me ok here goes to try. Then I need to get the dropdowns to work and render the data! Thank you for the help again 🙂

---

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://forum.freecodecamp.org/u/john1)\
**Post date:** [March 5, 2020, 6:28am UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/8 "2020-03-05T06:28:26Z")

</div>

Ok, I have been trying to get this to work. Are you able to help me just figure out how to get the data rendering and when a user selects a value from the dropdown it shows the relevant data? Sorry for asking but I am really stuck.

Cheers 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:34pm UTC](https://forum.freecodecamp.org/t/i-have-an-issue-with-my-data-not-showing-in-react-app/355771/9 "2021-06-01T19:34:39Z")

</div>