{"size": 1403, "ext": "js", "max_stars_repo_path": "frontend/src/Components/Form.js", "max_stars_repo_name": "Dev-Elie/Sending-Data-from-React-to-Flask", "max_stars_repo_stars_event_min_datetime": "2021-11-20T18:03:01.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-16T02:35:21.000Z", "max_issues_repo_path": "frontend/src/Components/Form.js", "max_issues_repo_name": "Dev-Elie/Sending-Data-from-React-to-Flask", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/Components/Form.js", "max_forks_repo_name": "Dev-Elie/Sending-Data-from-React-to-Flask", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 4, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.7796610169, "max_line_length": 69, "alphanum_fraction": 0.5281539558}
import React,{ useState } from 'react';
import APIService from '../Components/APIService'


const Form = (props) => {
    const [title, setTitle] = useState('')
    const [body, setBody] = useState('')

    const insertArticle = () =>{
      APIService.InsertArticle({title,body})
      .then((response) => props.insertedArticle(response))
      .catch(error => console.log('error',error))
    }

    const handleSubmit=(event)=>{ 
      event.preventDefault()
      insertArticle()
      setTitle('')
      setBody('')
    }

  return (
    <div className="shadow p-4">

        <form onSubmit = {handleSubmit} >

          <label htmlFor="title" className="form-label">Title</label>
          <input 
          type="text"
          className="form-control" 
          placeholder ="Enter title"
          value={title}
          onChange={(e)=>setTitle(e.target.value)}
          required
          />

          <label htmlFor="body" className="form-label">Body</label>
          <textarea 
          className="form-control" 
          placeholder ="Enter body" 
          rows='6'
          value={body}
          onChange={(e)=>setBody(e.target.value)}
          required
          >
          </textarea>

          <button 
          className="btn btn-primary mt-2"
          >
          Publish article</button>
          
        </form>
              

    </div>
  )}

export default Form;