rory0304 / movienote Goto Github PK

import React from "react";
import Axios from "axios";
import {commonAPI, secretKey} from "../../variable";
import PersonIcon from "../../assets/icons8-person-90.png";

class MyNote extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lists : [
        {
          movie_id : 531219,
          date : 20200202,
          contents : "가나다"
        },
        {
          movie_id : 531219,
          date : 20200302,
          contents : "가나다"
        },
        {
          movie_id : 531219,
          date : 20200402,
          contents : "가나다"
        }
      ],

      noteslist : []
    };
  }

  componentDidMount() {
    this.make();
  }

  listing = this.state.lists.map(
    async function make(one){

      const movie_url = `${commonAPI}${one.movie_id}?api_key=${secretKey}`;
      await Axios.get(movie_url).then(res => {
        this.setState({
          noteslist:
          <div className="Note">
          <h4>{one.date}</h4>
          <p>{res.data.title}</p>
          <p>{one.contents}</p>
          </div>
        })
      });
      
    }
  );

  render(){
    return (
      <div>
        <img src={PersonIcon} alt="PersonIcon" />
        <h2>user</h2>
        <input className="searching" placeholder="Searching" />
        <div className="notes">
         {this.state.noteslist}
        </div>
      </div>
    );
  }
}

export default MyNote;