CODEWITHSUNDEEP
reactjsfrontend
Jonathan Yuen
Jonathan Yuen

Reputation: 27

passing json information to child

Im trying to pass this jsons data into a props that i can use on the featured component of my app but every time i try to grab the information i get a results undefined

This is the main app component

class App extends Component {

  state = {
    items:[],
    didLoad: false
  }

  async componentDidMount() {
    const url = "https://api.songkick.com/api/3.0/artists/4971683/calendar.json?apikey={mykey}"
    const response =  await fetch(url);
    const data = await response.json();
    this.setState({items:data});
    console.log(this.state.items)
  }

  render() {
    return (
      <div className="App">
        <Header/>
        <Element name = 'Featured'>
          <Featured data1 = {this.state.items}/>
        </Element>
        <Element name = "Venue_info">
          <VenueInfo/>
        </Element>
        <Element name = "Highlights">
          <Highlights/>
        </Element>
        <Element name = "Pricing">
          <Pricing/>
        </Element>
        <Element name = "Location">
          <Location/>
        </Element>
        <Footer/>
      </div>
    );
  }
}

and this is the featured component that i want to use the api information on 

const Featured = (props) => {
    console.log(props)
    return (
        <div style = {{position: 'relative'}}>

            <Carrousel/>
            <div className = "artist_name">
                <div className = "wrapper">
                    Arianna Grande
                </div>
            </div>
            <TimeUntil deadline = {props.data1.resultsPage.results.event[0].start.datetime}/>
        </div>


    );
};

just used mykey as a placeholder but i do have an apikey for this api.

Upvotes: 0

Views: 67

Answers (1)

nir99
nir99

Reputation: 86

in the state you declare item as a array items = [] , so you need to access it as a array not as a object , 

const Featured = (props) => {
    console.log(props)
    return (
        <div style = {{position: 'relative'}}>
            <Carrousel/>
            <div className = "artist_name">
                <div className = "wrapper">
                    Arianna Grande
                </div>
            </div>
            <TimeUntil deadline = 
                  {props.data1[0].resultsPage.results.event[0].start.datetime}/>
        </div>


    );
};

Upvotes: 1

Related Questions