Passing state to app component

Question

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.

Answer 1 · 2019-04-16T21:25:52Z

April 16, 2019 9:25pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Martin Coutts

Martin Coutts

Passing state to app component

1 Answer

Seth Kroger

Seth Kroger