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

1

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:

Here is my code:

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 :slight_smile:

John.

2

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.

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

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?

4

  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 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.

5

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

Thank you!

6

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.

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
7

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 :slight_smile:

8

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 :slight_smile: