I'm trying to put api data in a slide, but there is a problem

Question

App.js

import { Component } from 'react'
import Header from './components/Header'
import Slide from './components/Slide'
import Body from './components/Body'
import Footer from './components/Footer'
import './App.css'
import axios from 'axios'

export default class App extends Component {

  constructor(props){
    super(props);
    this.state={
      movieObj:[] //State to put the received API data
    }
  }


  getMovies=async()=>{
    //화살표함수
      await axios({
      method:'get',
      url:'/v1/search/movie.json?query="스파이더맨"&display=6',
      dataType:'json',
      headers:{
        "X-Naver-Client-Id":'pcSk4iqo1SpsvR7nh1Ul',
        "X-Naver-Client-Secret":'g8wy7q0lQ7'
      }
    })
    .then(response => 
      {
        console.log(response);
        console.log(response.data.items);
        this.setState({
          movieObj:response.data.items
        })
      }
    )
  }

  componentDidMount(){
    this.getMovies()//호출
  }


  render() {
    console.log(this.state.movieObj)
    console.log(1)
    return (
      
        
        //Passing api data to sub-component Slide
        
        
      
    )
  }
}

Slide.js

import {Component} from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay, A11y } from 'swiper';
import '../css/slide.css'


// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';  

export default class Slide extends Component {
  constructor(props){
    super(props);
    this.state={
      slideObj:this.props.list//State to receive (this.props.list) from App.js
    }
  }

  render() {
    console.log(this.state.slideObj)
    return (
         console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
            >
            
                
                    Slide1
                
            
            Slide 2
            Slide 3
            Slide 4
            Slide 5
            Slide 6
        
    )
  }
}

I tried to put an api image inside a slide. Before putting image inside a slide, I checked whether the data received by axios is properly passed. but an empty array was output as a result of sending it to the subcomponent. [App.js - movieObj] (props)-> [Slide.js - slideObj]

How can I pass the apidata received from the parent component to the subcomponent? The help of the seniors is desperately needed. TT

Moa · Answer

I guess you've forgotten to add an element on each SwiperSlide.

To dynamically render the images retrieved from the API request, we'll have to map (or loop) through the this.state.slideObj array so we can populate attributes such as id, src and alt with data returned from getMovies().

I've omitted bits of code to keep it nimble:

export default class Slide extends Component {
  constructor(props) {
    super(props)
    this.state = {
      slideObj: this.props.list,
    }
  }

  render() {
    return (
      
        {this.state.slideObj.map(data => (
          
            
          
        ))}
      
    )
  }
}

Let me know how it goes?

Cheers

I'm trying to put api data in a slide, but there is a problem

1 Answers