retrieving data from link

[Costle784]

Using React

I've got a list of games rendered for each team. When I click on a game, I'd like to pass that games info (team, opp, date) to another component in order to work with that games data (get the moonphase for that particular game date etc). I'm having some trouble with this... I've added a onclick element with the hopes of being able to extract info, set a new property on State, then pass that state to the new element, but I can't get the necessary data. Thanks

[jsm13]

The click is a react-router Link? If so I'd pass the info (game id) in the path.

[Costle784]

this is how i'm mapping through the schedule. The routing is working fine. I just need to be able to manipulate this game's info once a user has clicked it.

let schedule = this.props.schedule.map((game, i) => {
      let pathname = `/teams/${game.team_id}/games/${game.id}`
      return <div key={i} onClick={(e) => this.props.handleClick(e)}><Link
to={{pathname}}>{game.date} vs {game.opp}</Link></div>
    })

On Thu, Jun 8, 2017 at 10:54 AM, John Master notifications@github.com wrote:

The click is a react-router Link? If so I'd pass the info (game id) in the path.

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

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

[jsm13]

If it's not a route change, you don't want to pass the info up but the new component should get the game data passed by props. The state should live in the common parent of the games list and this new component. See Where Your State Should Live in 'Thinking in React'

[Costle784]

Yes but i can't access the game data in order to change the state in order to pass it to the new component.

On Thu, Jun 8, 2017 at 10:59 AM, John Master notifications@github.com wrote:

If it's not a route change, you don't want to pass the info up but the new component should get the game data passed by props. The state should live in the common parent of the games list and this new component. See Where Your State Should Live in 'Thinking in React' https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live

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

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

[Costle784]

When a user clicks on a game, i'd like to set the state property, selectedGame: [ game object] so that I can access this particular game's properties.

On Thu, Jun 8, 2017 at 11:01 AM, Curtis Ostle curtisostle@gmail.com wrote:

Yes but i can't access the game data in order to change the state in order to pass it to the new component.

On Thu, Jun 8, 2017 at 10:59 AM, John Master notifications@github.com wrote:

If it's not a route change, you don't want to pass the info up but the new component should get the game data passed by props. The state should live in the common parent of the games list and this new component. See Where Your State Should Live in 'Thinking in React' https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live

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

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

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

[jsm13]

Gotcha, you should pass the game.id to the handleClick callback. The handleClick method should be defined originally in the same component where schedule and selectedGame are properties of state. That container component should then use the id to find the game from schedule and update state so selectedGame is that object

[Costle784]

Cool. That all makes sense. How to i pass the game.id to the handleclick callback? It's not liking this..

onClick = { (${game.id} ) => this.props.handleClick( ${game.id} ) }

On Thu, Jun 8, 2017 at 11:10 AM, John Master notifications@github.com wrote:

Gotcha, you should pass the game.id to the handleClick callback. The handleClick method should be defined originally in the same component where schedule and selectedGame are properties of state. That container component should then use the id to find the game from schedule and update state so selectedGame is that object

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

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

[jsm13]

onClick = { () => this.props.handleClick( game.id ) }