Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Martin Coutts
Martin Coutts
18,154 Points

Passing state to app component

I am currently trying to filter a list of countries in a second select from the choice on the first by the user. On change of the input I want to take the country code which is held in the value property and then pass it up to global state but I am having difficulty getting anything other than undefined.

My app component is

import React, { Component } from "react";
import "../index.scss";
import Header from "./Header";
import CountrySelect from "./CountrySelect";
import CompetitionSelect from "./CompetitionSelect";
import ErrorDiv from "./ErrorDiv";
import ScoreboardDiv from "./ScoreboardDiv";
import Table from "./Table";

class App extends Component {
  state = {
    countries: [],
    competitions: [],
    selectedCountry: ""
  };

  componentDidMount() {
    this.fetchCountries();
    this.fetchCompetitions();
  }

  fetchCountries() {
    fetch("http://api.football-data.org/v2/areas", {
      headers: {
        "X-Auth-Token": "d565497f7275426097c945923bac37d9"
      }
    })
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            countries: result.areas
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch block so that we don't swallow
        // exceptions from actual bugs in components.
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

  fetchCompetitions() {
    fetch("http://api.football-data.org/v2/competitions", {
      headers: {
        "X-Auth-Token": "d565497f7275426097c945923bac37d9"
      }
    })
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            competitions: result.competitions
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch block so that we don't swallow
        // exceptions from actual bugs in components.
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

  handleCountrySelect(event, value) {
    // this.setState({
    //   countryCode: this.target.value
    // });
    console.log(value);
  }

  render() {
    return (
      <div className="App">
        <Header />
        <CountrySelect
          countries={this.state.countries}
          handleCountrySelect={e => this.handleCountrySelect()}
        />
        <CompetitionSelect />
        <ErrorDiv />
        <ScoreboardDiv />
        <Table />
      </div>
    );
  }
}

export default App;

and the select component is

import React from "react";

const CountrySelect = props => (
  <select
    className="form-control"
    id="countrySelect"
    onChange={props.handleCountrySelect(option)}
  >
    {this.props.countries.map((country, index) => (
      <option key={index + 1} value={country.countryCode}>
        {country.name}
      </option>
    ))}
  </select>
);

export default CountrySelect;

Trying to pass the handleCountrySelect function down to the component and get a value back.

1 Answer

Seth Kroger
Seth Kroger
56,407 Points

There are two issues with the way you're handling this. First your handleCountrySelect() method has two arguments but you only pass one. The second is that the variable you pass, option, isn't defined anywhere.

I'd suggest just using the value parameter and in the CountrySelect component use this to pull the value from the event which is passed by default:

onChange={e => props.handleCountrySelect(e.target.value)}