{"size": 994, "ext": "js", "max_stars_repo_path": "src/main/react-webapp/src/components/AllDrugs.js", "max_stars_repo_name": "mcollins42/sps-sm21-team-19", "max_stars_repo_stars_event_min_datetime": "2021-06-24T18:17:56.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-24T18:17:56.000Z", "max_issues_repo_path": "src/main/react-webapp/src/components/AllDrugs.js", "max_issues_repo_name": "mcollins42/sps-sm21-team-19", "max_issues_repo_issues_event_min_datetime": "2021-07-01T20:33:48.000Z", "max_issues_repo_issues_event_max_datetime": "2021-07-26T00:33:13.000Z", "max_forks_repo_path": "src/main/react-webapp/src/components/AllDrugs.js", "max_forks_repo_name": "mcollins42/sps-sm21-team-19", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 28.4, "max_line_length": 88, "alphanum_fraction": 0.4255533199}
import { Link } from 'react-router-dom'
import React from "react";

const AllDrugs = () => {

    const [drugs, setDrugs] = React.useState([])

    React.useEffect(() => {
        const getData = async () =>{
            const data = await fetch('/list-drugs')
            const allDrugsInfo = await data.json()
            setDrugs(allDrugsInfo)
        }
        getData()
    }, [])
    
    return(
        <div className="container justify-content-center">
            <h1 className="my-4 text-center">All drugs</h1>
            <div className="mx-5 px-5">
                {
                    drugs.map( item => (
                        <div className='p-3' key={item.id}>
                            <h4 className="text-center"><Link to = {`/drug/${item.id}`}>
                                {item.name}
                            </Link></h4>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default AllDrugs;