Hello I am having trouble passing the id on click back to the context file to render the correct info on the page. I have tried just about everything and am not to sure what to do to make this work?!
Context file:
this is where in headers.id = res.data[1].playerId i know i need a function to pass in the player id but am unsure how to do it from my handleClick.
// use mlbData in table
setMlbData(res.data)
// const pid = res.data.find(player => player.playerId == playerId)
console.log(res.data)
headers.id = res.data[1].playerId
mlbapi = `/mlb/player/${headers.id}`
// headers.id = res.data[1].playerId
console.log(res.data)
console.log(headers)
res = await axios.get(url + mlbapi, {headers})
setPlayerStats(res.data)
}
PlayerList.js file:
const handleClick = (e) => {
// console.log("I have been clicked", e.target.id)
// console.log(`${playerId}`)
history.push(`/stats/${e.target.id}`)
console.log(e.target.id)
}
// const { fullName, teamImage, mlbData, playerId } = this.context
const Team = ({ tableManager, value, field, data, column, colIndex, rowIndex }) => {
return (
<div onClick={ handleClick } className='rgt-cell-inner' style={{display: 'flex', alignItems: 'center', overflow: 'hidden'}}>
<img src={data.teamImage} alt="user avatar" id={ playerId }/>
<span className='rgt-text-truncate' style={{marginLeft: 10}}>{value}</span>
</div>
)
}
App.js file:
function App() {
return (
<div className="App">
<GetMlbData>
<Navbar />
<div className="content">
<Switch>
<Route exact path="/">
<PlayerList />
</Route>
<Route path="/stats/:id">
<Stats />
</Route>
</Switch>
</div>
</GetMlbData>
</div>
);
}