{"size": 1228, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "AnasDalalaah/my-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "AnasDalalaah/my-app", "max_issues_repo_issues_event_min_datetime": "2021-07-26T21:41:14.000Z", "max_issues_repo_issues_event_max_datetime": "2021-07-27T17:18:47.000Z", "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "AnasDalalaah/my-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 20.813559322, "max_line_length": 63, "alphanum_fraction": 0.5806188925}

import React from "react";
import "./App.css";
import Main from "./Components/Main";
import Header from "./Components/Header";
import Footer from "./Components/Footer";
import Data from "./Components/assests/data.json";
import SelectedBeast from "./Components/SelectedBeast";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      title: 'title',
      imageUrl: 'img',
      description: 'desc',
      modalShow: false,
    };
  }


 apperingData = (title, imageUrl, description,  modalShow) => {
      this.setState({
        title: title,
        imageUrl: imageUrl,
        description: description,
        modalShow:modalShow,
      });
  };

  handleShow =  modalShow =>{
      this.setState({
        modalShow:modalShow
      });
  }


  render(){
    return(
      <>
        <SelectedBeast 
          title={this.state.title}
          imageUrl={this.state.imageUrl}
          description={this.state.description}
          showModal={this.state.modalShow}
          hideN={this.handleShow}

        />
        <Header />
        <Main 
          dataList={Data}
          apperingData={this.apperingData}/>
        <Footer />
      </>
    );
  }
}

export default App;