ga-wdi-exercises/project4

.find() in react

Closed this issue · 10 comments

Costle784 commented

this keeps returning undefined. I can't figure out why.... All the values are there when I console.log them individually. thanks

let teamid = this.props.team_id
let id = this.props.id
let game = this.props.schedule.find((game) => {
return game.id === id && game.team_id === teamid
})
console.log(game)

Costle784 commented

managed to solve this actually. thanks.

Costle784 commented

i got it to target the user selected game, but the component is rendering now before the variable is getting assigned which is causing an error

AndyWhitley commented

One unrelated thing to address, go and and run npm install --save axios inside the React directory to add Axios as a dependency in package.json. Still working on your main issue, one moment...

Costle784 commented
AndyWhitley commented

The problem was you were using === instead of == which enforces type equality. this.props.id is a number in String format whereas game.id is a Number. You can either use == or, more properly, parseInt():

AndyWhitley commented 
import React, { Component } from 'react'

class SelectedGame extends Component {
  render() {
    console.log(this.props)
    let teamid = this.props.team_id
    let id = this.props.id
    let chosenGame = this.props.schedule.find((game) => {
      return game.id == id && game.team_id == teamid
    })
    let opponent = chosenGame.opp

    return (
      <div>{opponent}</div>
    )
  }
}

export default SelectedGame
AndyWhitley commented

OR...

import React, { Component } from 'react'

class SelectedGame extends Component {
  render() {
    console.log(this.props)
    let teamid = this.props.team_id
    let id = this.props.id
    let chosenGame = this.props.schedule.find((game) => {
      return game.id === parseInt(id) && game.team_id === parseInt(teamid)
    })
    let opponent = chosenGame.opp

    return (
      <div>{opponent}</div>
    )
  }
}

export default SelectedGame
Costle784 commented