Passing props through route

Question

// App.js

import React from 'react'

function wate() {
let singleEpisode = {}
const [episodes, setEpisodes] = useState([])
const [singleEpi, setSingleEpic] = useState(singleEpisode)

const searchEpisode = (e) => {
    e.preventDefault(e)
    const { id, name, air_date, episode } = episodes[index]
    setSingleEpic({
      id: id,
      name: name,
      air_date: air_date,
      episode: episode
    })
return (
    <React.Fragment>
    <Router>
      <NavBar searchEpisode={searchEpisode} searchIt={searchIt} />
      <Switch>
        <Route path='/displayepisode' render={(props) => <DisplayEpisode {...props} epics={singleEpi} />} />
      </Switch>
    </Router>
  </React.Fragment>
)
}
export default wate

// DisplayEpisode.js

import React from 'react'

function DisplayEpisode(props) {
const { id, name, air_date, episode } = props
console.log(props.epics)}

export default DisplayEpisode

Episodes has an array of objects more than 40 depending on the index value I'm destructing id, name, air_date, episode. now I need to set those values to singleEpic as object and pass the singleEpic to child component and destructure them and use it.

Answer 1

You are setting state wrong. You need to pass proper object into setSingleEpic method.

setSingleEpic({
      id: id,
      name: name,
      air_date: air_date,
      episode: episode
     }
    )