ga-wdi-exercises / project4

[project]
https://github.com/ga-wdi-exercises/project4
2 stars 8 forks source link

.find() in react #514

Closed Costle784 closed 7 years ago

Costle784 commented 7 years ago

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 7 years ago

managed to solve this actually. thanks.

Costle784 commented 7 years ago

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

Costle784 commented 7 years ago

https://github.com/Costle784/Moonbats

AndyWhitley commented 7 years ago

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 7 years ago

cool thx, i'll do that. I'd like to be able to display "You've selected The nationals vs the mariners on June 8" or something like that. Then a button to push to consult the moon on who will win.

On Thu, Jun 8, 2017 at 2:26 PM, Andy Whitley notifications@github.com wrote:

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

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/ga-wdi-exercises/project4/issues/514#issuecomment-307187528, or mute the thread https://github.com/notifications/unsubscribe-auth/AXyi4F3YGhz2tdiWWbIwUf_7if_fc282ks5sCDy6gaJpZM4N0Yhi .

-- Curtis Ostle Bassist, Educator, Composer www.curtisostle.net Curtisostle@gmail.com Cell: (202) 297-6091

AndyWhitley commented 7 years ago

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 7 years ago
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 7 years ago

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
AndyWhitley commented 7 years ago

^ @Costle784

Costle784 commented 7 years ago

ahh.. thank you

On Thu, Jun 8, 2017 at 2:40 PM, Andy Whitley notifications@github.com wrote:

^ @Costle784 https://github.com/costle784

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ga-wdi-exercises/project4/issues/514#issuecomment-307191444, or mute the thread https://github.com/notifications/unsubscribe-auth/AXyi4NTSvtrThaDyxrnO_c_bEXlfkAbMks5sCEAjgaJpZM4N0Yhi .

-- Curtis Ostle Bassist, Educator, Composer www.curtisostle.net Curtisostle@gmail.com Cell: (202) 297-6091