searchJournalFields.js
9aa535b41700react18

searchJournalFields.js
View Options

			import React, {useState} from 'react';
			import { makeStyles } from '@material-ui/core/styles';
			import Button from '@material-ui/core/Button';
			import Input from '@material-ui/core/Input';
			import API from '../api';
			import JournalCard from "./journalCard"



			const useStyles = makeStyles((theme) => ({
			root: {
			'& > *': {

			margin: theme.spacing(1),
			display: 'grid',
			},
			}
			}));



			export default function SearchJournalFields() {
			const classes = useStyles();

			//declare state hook for functional component
			const [query, setQuery] = useState(''); //query storage
			const [journals, setJournals] = useState([]);


			const searchJournals = (e) => {
			e.preventDefault();
			// console.log("submitting");

			// const query = "name"; test purpose


			API.get(`journal/?search=${query}`)
			.then(res => {
			const data = res.data;
			setJournals(data);

			console.log(data);

			})


			}


			return (
			<>
			<form style={{ marginTop: "8rem"}} className={classes.root} noValidate autoComplete="on" onSubmit={searchJournals} color="inherit">



			<Input type='text 'name="query"
			placeholder="Enter Journal Title or ISSN"
			value={query}
			onChange={(e) => setQuery(e.target.value)}
			inputProps={{'object': 'description'}} />
			<Button style={{width: '99%'}}variant="contained" color="secondary" type="submit">
			Search
			</Button>
			</form>


			<div className="card-list" style={{ marginTop: "4rem"}}>
			{journals.map(journal =>(
			<JournalCard journal={journal} key={journal.id}/>
			))}
			</div>
			</>
			);
			}